Be tudok állítani több értéket ugyanahhoz a CSS tulajdonsághoz Javascript segítségével?

Programozott módon szeretném beállítani a CSS cursor értékét mind -webkit-grab, mind -moz-grab értékre. Például egy stíluslapon így lenne ábrázolva

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

Tehát itt a mySelector elemhez kétszer van definiálva a kurzor. A Webkit böngészők az első definíciót használják, a Firefox a másodikat. Kíváncsi vagyok, van-e valami mód JavaScriptben az egyenértékű végrehajtására. Tudom, hogy beállíthatnék egy osztályt, de a kérdésem inkább kíváncsiságból indult, hogy lássam, lehetséges-e, nem pedig hogy jelenlegi valós problémámat oldjam meg.

Szerkesztés Tisztázásképpen - az általam közzétett CSS (bár érvényes kiválasztóval) MŰKÖDIK mindkét böngészőben. Csak arra vagyok kíváncsi, van-e olyan módszer, ami kizárólag JavaScripttel működik.

Válasz #1

A stílust a style.cssText tulajdonság használatával is beállíthatja:

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

A böngészők megpróbálják ugyanúgy értelmezni az értéket, ahogyan a CSS-t értelmezik, és alkalmazzák az összes olyan tulajdonságot, amelyet fel tudnak ismerni. De azt javaslom, hogy ezeket a stílusokat egy osztályban definiáljuk, és egyszerűen adjuk hozzá ezt az osztályt az elemhez.

Válasz #2

Egy mód, amit láttam, egyszerűen tesztelni, hogy az értékek hozzárendelése sikeres volt-e. Ha olyan értéket rendelsz hozzá, amit a böngésző nem ért, egyszerűen figyelmen kívül hagyja. Például Webkit-ben:

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

Tehát ezt a viselkedést használhatod saját függvény létrehozására:

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

Használat :

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

Ez valószínűleg nem fog működni minden CSS-tulajdonsággal, különösen a rövidítésekkel nem, de remélhetőleg azokkal, amelyek egyszerű értékekkel rendelkeznek.