Can I set multiple values of the same CSS property with Javascript? - Stack Overflow

admin管理员组

文章数量:1410697

I want to programmatically set the CSS cursor value to both -webkit-grab and -moz-grab. For example, in a stylesheet, it would be represented as

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

So here, the mySelector element has the cursor defined twice. Webkit browsers use the first definition, Firefox the second. I'm wondering if there is any way in Javascript to do the equivalent. I realize I could set a class, but my question was more for curiosity's sake to see if it was possible, than to solve a real-world problem I currently have.

Edit To clarify - the CSS I've posted (albeit with a valid selector) DOES work in both browsers. I'm just wondering if there's a javascript-only way to do this.

I want to programmatically set the CSS cursor value to both -webkit-grab and -moz-grab. For example, in a stylesheet, it would be represented as

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

So here, the mySelector element has the cursor defined twice. Webkit browsers use the first definition, Firefox the second. I'm wondering if there is any way in Javascript to do the equivalent. I realize I could set a class, but my question was more for curiosity's sake to see if it was possible, than to solve a real-world problem I currently have.

Edit To clarify - the CSS I've posted (albeit with a valid selector) DOES work in both browsers. I'm just wondering if there's a javascript-only way to do this.

• javascript
• css

Share Improve this question Follow edited Apr 11, 2014 at 2:31 Quasipickle asked Apr 11, 2014 at 0:26 QuasipickleQuasipickle 4,50811 gold badge3737 silver badges6060 bronze badges 9

• Note that in CSS you're really not setting the same property to multiple values. Only one of them will be recognized, depending on the browser. – Pointy Commented Apr 11, 2014 at 0:28
• At what point do you want to move from one to the other? – Lee Taylor Commented Apr 11, 2014 at 0:29
• When you're directly setting properties on the style object, it seems that the browser lets you set "bad" values but then ignores them. – Pointy Commented Apr 11, 2014 at 0:32
• Yes, the code you are using will be interpreted correctly by Mozilla and WebKit browsers and ignored by any browser that doesn't recognise those values (eg. IE) – sinisterfrog Commented Apr 11, 2014 at 0:33
• @sinisterfrog but on a webkit browser it actually won't work, because setting "cursor" to "-moz-grab" after setting it to the WebKit version will overwrite it; the property will be ignored. – Pointy Commented Apr 11, 2014 at 0:34

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 3

You can also set the style using style.cssText property:

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

Browsers will try to parse the value the same way they parse CSS and apply all the properties they can recognize. But I'd suggest to define these styles in a class and just add this class to the element instead.

One way I have seen is to simply test whether the an assignment of the values was successful. If you assign a value the browser doesn't understand, it simply ignores it. For example in webkit:

> d = document.createElement('div')
  <div>​</div>​
> d.style.cursor = '-moz-grab';
  "-moz-grab"
> d.style.cursor
  ""

So you can use that behavior to roll your own function:

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

Usage:

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

This probably won't work for every CSS property, especially not with shorthands, but hopefully for the ones with simple values.

maybe you can detect the browser and add the proper css. something like this:

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

I am making a web page on which I can drag items and I wanted to include those nice grabbing cursors :D. I have tried 2/3 of the above options, but they both didn't work.
Also I think the detecting browsers solution is not optimal/accurate enough.

This is my solution:

First the css file:

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

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

So, the standard cursor will be 'grab' for me. Make sure .grabbed is always further down in your css file than the standard class .item.

Finally, the js file:

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

You can see that whenever I start dragging, .grabbed is added, so my cursor will be 'grabbing'.
When I stop dragging, the .grabbed class is removed and the cursor returns to 'grab'.

本文标签： Can I set multiple values of the same CSS property with JavascriptStack Overflow