¿Puedo establecer múltiples valores de la misma propiedad CSS con Javascript?

Quiero establecer programáticamente el valor de CSS cursor tanto a -webkit-grab como a -moz-grab. Por ejemplo, en una hoja de estilo, se representaría como

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

Entonces aquí, el elemento mySelector tiene el cursor definido dos veces. Los navegadores Webkit usan la primera definición, Firefox la segunda. Me pregunto si hay alguna manera en Javascript de hacer lo equivalente. Me doy cuenta de que podría establecer una clase, pero mi pregunta era más por curiosidad para ver si era posible, que para resolver un problema real que tenga actualmente.

Editar Para aclarar: el CSS que he publicado (aunque con un selector válido) SÍ funciona en ambos navegadores. Solo me pregunto si hay una manera de hacer esto solo con javascript.

Respuesta #1

También puedes establecer el estilo usando la propiedad style.cssText:

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

Los navegadores intentarán analizar el valor de la misma manera que analizan CSS y aplicarán todas las propiedades que puedan reconocer. Pero sugeriría definir estos estilos en una clase y simplemente agregar esta clase al elemento en su lugar.

Respuesta #2

Una forma que he visto es simplemente probar si la asignación de los valores fue exitosa. Si asignas un valor que el navegador no entiende, simplemente lo ignora. Por ejemplo, en webkit:

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

Así que puedes usar ese comportamiento para crear tu propia función:

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

Uso :

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

Esto probablemente no funcionará para todas las propiedades de CSS, especialmente no con abreviaturas, pero con suerte sí para aquellas con valores simples.