Question

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

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

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

编辑为了澄清 - 我发布的CSS（尽管有一个有效的选择器）可以在两个浏览器中使用。我只是想知道是否只有这样的javascript方式。

Answer 1

您还可以使用style.cssText属性设置样式：

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

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

Answer 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属性起作用，特别是对于短名称，但希望对于具有简单值的属性。

Answer 3

也许你可以检测浏览器并添加正确的CSS。像这样的东西：

if (jQuery.browser.mozilla)
    $('mySelector').css('cursor','-moz-grab');
else if (jQuery.browser.safari)
    $('mySelector').css('cursor','-webkit-grab');

Answer 4

我正在制作一个网页，我可以拖动项目，我想包括那些漂亮的抓取游标：D。我已经尝试了以上的2/3 选项，但他们都没有工作另外我认为检测浏览器解决方案不够优化/准确。

这是我的解决方案：

首先是css文件：

.item{
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.grabbed{
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;  
}

因此，标准光标将被“抓住”。为了我。确保css文件中的.grabbed总是比标准类.item更低。

最后，js文件：

        $(".item").draggable({          
        start: function () {
            $(".item").addClass("grabbed");//                
        },
        stop: function () {
            $(".item").removeClass("grabbed");
        }
    });

您可以看到，每当我开始拖动时，都会添加.grabbed，因此我的光标将会抓住＆＃39;。
当我停止拖动时，.grabbed类被删除，光标返回到“抓住”。

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

4 个答案: