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

Question

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.

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
– Pointy, Commented Apr 11, 2014 at 0:28
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
– 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
– 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
– Pointy, Commented Apr 11, 2014 at 0:34

Ilya Streltsyn · Accepted Answer · 2014-04-11 01:16:12Z

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.

answered Apr 11, 2014 at 1:16

Ilya Streltsyn

13.6k2 gold badges40 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2014-04-11 01:07:47Z

2

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.

answered Apr 11, 2014 at 1:07

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

1 Comment

Quasipickle Over a year ago

Not as tidy as I was hoping, but I was hoping for something that doesn't exist. This seems the most robust though. Thanks.

Ehsan Tavakoli · Accepted Answer · 2014-04-11 00:40:39Z

1

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

answered Apr 11, 2014 at 0:40

Ehsan Tavakoli

4541 gold badge3 silver badges10 bronze badges

Comments

Jacobus Pasterkamp · Accepted Answer · 2016-03-17 15:56:48Z

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'.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related