CODEWITHSUNDEEP
javascriptcss
Quasipickle
Quasipickle

Reputation: 4498

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

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.

Upvotes: 6

Views: 2877

Answers (4)

Jacobus Pasterkamp
Jacobus Pasterkamp

Reputation: 1


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

Upvotes: 0

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

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.

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 816422

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.

Upvotes: 2

Ehsan Tavakoli
Ehsan Tavakoli

Reputation: 454

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

Upvotes: 1

Related Questions