Kan jeg sette flere verdier for den samme CSS-egenskapen med Javascript?

Jeg vil programmessig sette CSS-verdien cursor til både -webkit-grab og -moz-grab. For eksempel, i et stilark, ville det bli representert som

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

Så her har mySelector-elementet markøren definert to ganger. Webkit-nettlesere bruker den første definisjonen, Firefox den andre. Jeg lurer på om det finnes en måte i Javascript å gjøre det tilsvarende. Jeg skjønner at jeg kunne satt en klasse, men spørsmålet mitt var mer av nysgjerrighet for å se om det var mulig, enn å løse et virkelig problem jeg har for øyeblikket.

Rediger For å klargjøre - CSS-en jeg har lagt ut (selv med en gyldig selektor) FUNGERER i begge nettleserne. Jeg lurer bare på om det finnes en måte å gjøre dette kun med JavaScript.

Svar #1

Du kan også sette stilen ved å bruke style.cssText-egenskapen:

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

Nettlesere vil prøve å analysere verdien på samme måte som de analyserer CSS og bruke alle egenskapene de kan gjenkjenne. Men jeg vil foreslå å definere disse stilene i en klasse og bare legge til denne klassen på elementet i stedet.

Svar #2

En måte jeg har sett er å ganske enkelt teste om tildelingen av verdiene var vellykket. Hvis du tildeler en verdi som nettleseren ikke forstår, ignorerer den den ganske enkelt. For eksempel i webkit:

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

Så du kan bruke den oppførselen til å lage din egen funksjon:

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

Bruk:

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

Dette vil sannsynligvis ikke fungere for hver CSS-egenskap, spesielt ikke med snarveier, men forhåpentligvis for de med enkle verdier.