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

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

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

在一天结束时，您的JS将在特定浏览器的用户特定计算机上执行，因此通过检测浏览器并为该浏览器应用适当的样式，您可以解决问题。

Pesudo代码：

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';
}

Answer 3

在这方面可能很有用：如果您尝试设置无效值，浏览器将忽略它。所以这样的事情有效：

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);
}

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

3 个答案: