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

Question

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

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

所以这里,mySelector元素的游标定义了两次.Webkit浏览器使用第一个定义,第二个是Firefox.我想知道Javascript中是否有任何方法可以做同等的事情.我意识到我可以设置一个课程,但我的问题更多的是出于好奇心,看看它是否可能,而不是解决我现在遇到的现实问题.

编辑为了澄清 - 我发布的CSS(虽然有一个有效的选择器)可以在两个浏览器中工作.我只是想知道是否有一个只使用javascript的方法来做到这一点.

Answer 1

我看到的一种方法是简单地测试值的分配是否成功。如果您分配的值浏览器无法理解，它只会忽略它。例如在 webkit 中：

\n\n

> d = document.createElement(\'div\')\n  <div>\xe2\x80\x8b</div>\xe2\x80\x8b\n> d.style.cursor = \'-moz-grab\';\n  "-moz-grab"\n> d.style.cursor\n  ""\n

\n\n

因此，您可以使用该行为来推出您自己的函数：

\n\n

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

\n\n

用法：

\n\n

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

\n\n

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

\n