Puis-je définir plusieurs valeurs de la même propriété CSS avec Javascript ?

Je veux définir de manière programmatique la valeur CSS cursor à la fois sur -webkit-grab et -moz-grab. Par exemple, dans une feuille de style, cela serait représenté comme

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

Donc ici, l'élément mySelector a le curseur défini deux fois. Les navigateurs Webkit utilisent la première définition, Firefox la deuxième. Je me demande s'il existe un moyen en Javascript de faire l'équivalent. Je comprends que je pourrais définir une classe, mais ma question était plutôt par curiosité pour voir si c'était possible, plutôt que pour résoudre un problème réel que j'ai actuellement.

Modifier Pour clarifier - le CSS que j'ai publié (même avec un sélecteur valide) FONCTIONNE dans les deux navigateurs. Je me demande juste s'il existe un moyen de le faire uniquement avec du JavaScript.

Réponse n°1

Vous pouvez également définir le style en utilisant la propriété style.cssText :

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

Les navigateurs vont essayer d'analyser la valeur de la même manière qu'ils analysent le CSS et appliquer toutes les propriétés qu'ils peuvent reconnaître. Mais je suggérerais de définir ces styles dans une classe et simplement d'ajouter cette classe à l'élément à la place.

Réponse n°2

Une façon que j'ai vue est de simplement tester si l'affectation des valeurs a réussi. Si vous assignez une valeur que le navigateur ne comprend pas, il l'ignore simplement. Par exemple dans webkit :

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

Ainsi, vous pouvez utiliser ce comportement pour créer votre propre fonction :

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

Cela ne fonctionnera probablement pas pour toute propriété CSS, surtout pas avec les raccourcis, mais espérons-le pour celles avec des valeurs simples.