通过纯 JavaScript 更新 CSS...如果属性使用供应商前缀，我该如何更新？

Question

例如，如果我想为我的光标设置一个抓取图标，在 CSS 中我会使用这个：

div {
     cursor: -moz-grabbing;
     cursor: -webkit-grabbing;
     cursor: grabbing;
    }

但是假设我想通过 JavaScript 实现它，但仍然能够涵盖所有三个，我该怎么做？我是否只需将它们分配在三行中 - JavaScript 会回退到之前的分配吗？

document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
document.getElementById('theDiv').style.cursor = '-moz-grabbing';
document.getElementById('theDiv').style.cursor = 'grabbing';

Answer 1

1) 您可以为此添加一个分配所有属性的类。

2) 如果你按照自己的方式尝试，Javascript 将重新分配属性 3 次，最后执行的最后一个作为活动的，所以

    document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
    document.getElementById('theDiv').style.cursor = '-moz-grabbing';
    document.getElementById('theDiv').style.cursor = 'grabbing';

不会工作。

3) 添加一个类就可以了。例如：

    css:-
    .myClass {
      cursor: -moz-grabbing; 
      cursor: -webkit-grabbing; 
      cursor: grabbing; 
     }

和

   js:-

   document.getElementById('theDiv').className += 'myClass';

Answer 2

在这方面可能很高兴知道：如果您尝试设置无效值，浏览器将忽略它。所以像这样的工作：

function setStyle(element, property, value) {
    var prefix = ['', '-webkit-', '-moz-'];
    var i = 0;
    var style = element.style;
    do {
        style[property] = prefix[i] + value;
        i += 1;
    }
    while(style[property] !== prefix[i] + value && i < prefix.length);
}

Answer 3

不，Javascript 将重新分配属性 3 次，最后执行的最后一个作为活动的。

您想要的是检测您正在使用哪种浏览器与 javascript，然后应用适当的浏览器。

最终，您的 JS 在用户的特定机器上使用特定浏览器执行，因此通过检测浏览器并为该浏览器应用适当的样式，您就可以解决问题。

伪代码：

if(isMozilla) {
    document.getElementById('theDiv').style.cursor = '-moz-grabbing';
}
else if(isChrome OR isSafari) {
    document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
}
else {
    document.getElementById('theDiv').style.cursor = 'grabbing';
}