7

例如，如果我想要一个用于光标的抓取图标，在 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';
4

3 回答 3

11

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';
于 2014-11-25T19:10:24.473 回答
2

不，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';
}
于 2014-11-25T19:11:40.380 回答
1

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

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);
}
于 2014-11-25T19:34:53.037 回答