我可以用 Javascript 设置同一个 CSS 属性的多个值吗？

我想以编程方式将 CSS cursor 值设置为 -webkit-grab 和 -moz-grab。例如，在样式表中，它将表示为

mySelector{
    cursor:-webkit-grab;
    cursor:-moz-grab;
}

所以在这里，mySelector 元素定义了两次光标。Webkit 浏览器使用第一次定义，Firefox 使用第二次。我想知道是否有任何方法可以在 Javascript 中实现同样的效果。我知道我可以设置一个类，但我问这个问题更多是出于好奇，想看看是否可能，而不是为了解决我目前的实际问题。

编辑 澄清一下——我发布的 CSS（尽管有一个有效的选择器）在两个浏览器中确实有效。我只是想知道是否有仅使用 JavaScript 的方法来实现这个。

答案＃1

你也可以使用 style.cssText 属性来设置样式：

element.style.cssText = "cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;";

浏览器会尝试像解析 CSS 一样解析该值，并应用它们可以识别的所有属性。但我建议将这些样式定义在一个类中，然后只将这个类添加到元素上。

答案＃2

我见过的一种方法是简单地测试值的赋值是否成功。如果你赋予浏览器不理解的值，它会直接忽略。例如在 Webkit 中：

> d = document.createElement('div')
  <div></div>
> d.style.cursor = '-moz-grab';
  "-moz-grab"
> d.style.cursor
  ""

所以你可以利用这种行为来自己编写函数：

var setVendorStyle = (function() {
    var vendor_prefix = ['-moz-', '-webkit-'];
    return function(element, prop, value) {
        // try unmodified value first
        element.style[prop] = value;
        if (element.style[prop] === value) {
           return value;
        }
        // try vendor prefixes
        for (var i = 0, l = vendor_prefix.length; i < l; i++) {
           var vendor_value = vendor_prefix[i] + value;
           element.style[prop] = vendor_value;
           if (element.style[prop] === vendor_value) {
              return vendor_value;
           }
        }
        return false; // unsuccessful
    };
}());

用法：

setVendorStyle(element, 'cursor', 'grab');

这可能对每个CSS属性都不适用，尤其是简写属性，但希望对那些值简单的属性有效。