Posso impostare più valori della stessa proprietà CSS con Javascript?

Question

Desidero impostare il valore CSS cursor su entrambi -webkit-grab e -moz-grab. Ad esempio, in un foglio di stile, sarebbe rappresentato come

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

Così qui, l'elemento mySelector ha il cursore definito due volte. I browser Webkit utilizzano la prima definizione, Firefox la seconda. Mi chiedo se c'è qualche modo in Javascript per fare l'equivalente. Mi rendo conto che potrei fissare una lezione, ma la mia domanda era più per curiosità di vedere se fosse possibile, che per risolvere un problema del mondo reale che attualmente ho.

Modifica Per chiarire: il CSS che ho pubblicato (anche se con un selettore valido) FUNZIONA in entrambi i browser. Mi sto solo chiedendo se c'è un modo solo per javascript per farlo.

Answer 1

Un modo che ho visto è quello di verificare semplicemente se l'un'assegnazione dei valori ha avuto successo. Se assegni un valore che il browser non capisce, lo ignora semplicemente. Per esempio in WebKit:

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

modo da poter utilizzare quel comportamento a rotolare la propria funzione:

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

Questo probabilmente non funzionerà per ogni Proprietà CSS, in particolare non con stenografie, ma si spera per quelle con valori semplici.

Answer 2

forse è possibile rilevare il browser e aggiungere il css corretto. qualcosa di simile:

if (jQuery.browser.mozilla) 
    $('mySelector').css('cursor','-moz-grab'); 
else if (jQuery.browser.safari) 
    $('mySelector').css('cursor','-webkit-grab'); 

Answer 3

È inoltre possibile impostare lo stile utilizzando style.cssText proprietà:

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

browser cercherà di analizzare il valore stesso modo in cui analizzare i CSS e applicare tutte le proprietà che possono riconoscere. Ma suggerirei di definire questi stili in una classe e aggiungere invece questa classe all'elemento.

Answer 4

Sto facendo una pagina web su cui posso trascinare gli elementi e volevo includere quelle belle cursori afferrare: D. Ho provato 2/3 delle opzioni sopra , ma entrambi non hanno funzionato.
Inoltre, penso che la soluzione di rilevamento dei browser non sia ottimale/accurata.

Questa è la mia soluzione:

In primo luogo il file css:

.item{ 
    cursor: -moz-grab; 
    cursor: -webkit-grab; 
} 

.grabbed{ 
    cursor: -moz-grabbing; 
    cursor: -webkit-grabbing; 
} 

Così, il cursore di serie sara 'afferrare' per me. Assicurati che .grabbed sia sempre più in basso nel tuo file css rispetto alla classe standard .item.

Infine, il file js:

 $(".item").draggable({   
     start: function() { 
      $(".item").addClass("grabbed");//     
     }, 
     stop: function() { 
      $(".item").removeClass("grabbed"); 
     } 
    }); 

Si può vedere che ogni volta che mi metto il trascinamento, viene aggiunto .grabbed, quindi il mio cursore sara 'afferrare'.
Quando termino il trascinamento, la classe .grabbed viene rimossa e il cursore torna a "afferrare".