Aggiornamento CSS tramite codice JavaScript semplice ... come aggiornare se la proprietà utilizza i prefissi dei fornitori?

Question

Per esempio, se voglio un'icona di afferrare per il mio cursore, in CSS userei questo:

div { 
    cursor: -moz-grabbing; 
    cursor: -webkit-grabbing; 
    cursor: grabbing; 
    } 

Ma diciamo che, Voglio realizzare questo tramite JavaScript, ma ancora in grado di coprire tutti e tre, come faccio questo? Li assegno solo su tre righe: JavaScript fa un fallback al precedente incarico?

document.getElementById('theDiv').style.cursor = '-webkit-grabbing'; 
document.getElementById('theDiv').style.cursor = '-moz-grabbing'; 
document.getElementById('theDiv').style.cursor = 'grabbing'; 

Answer 1

1) È possibile aggiungere una classe a tale scopo che assegna tutte le proprietà.

2) Se si prova a modo tuo, allora, sarà Javascript riassegnare la proprietà 3 volte e finire con l'ultimo eseguito come quella attiva, così

document.getElementById('theDiv').style.cursor = '-webkit-grabbing'; 
    document.getElementById('theDiv').style.cursor = '-moz-grabbing'; 
    document.getElementById('theDiv').style.cursor = 'grabbing'; 

non funzionerà.

3) Aggiungere una classe lo farebbe. per esempio:

css:- 
    .myClass { 
     cursor: -moz-grabbing; 
     cursor: -webkit-grabbing; 
     cursor: grabbing; 
    } 

e

js:- 

    document.getElementById('theDiv').className += 'myClass'; 

Answer 2

No, Javascript sarà riassegnare la proprietà 3 volte e finire con l'ultimo eseguito come quello attivo.

Quello che vuoi è rilevare quale browser stai usando con javascript e quindi applicare quello appropriato.

Alla fine della giornata il tuo JS viene eseguito sulla macchina specifica dell'utente con il browser specifico in modo da rilevare il browser e applicare lo stile appropriato per quel browser risolvendo il tuo problema.

Codice pesudo:

if(isMozilla) { 
    document.getElementById('theDiv').style.cursor = '-moz-grabbing'; 
} 
else if(isChrome OR isSafari) { 
    document.getElementById('theDiv').style.cursor = '-webkit-grabbing'; 
} 
else { 
    document.getElementById('theDiv').style.cursor = 'grabbing'; 
} 

Answer 3

Probabilmente bene sapere a questo proposito: se si sta cercando di impostare un valore non valido, il browser lo ignorerà. Quindi qualcosa di simile funziona:

function setStyle(element, property, value) { 
    var prefix = ['', '-webkit-', '-moz-']; 
    var i = 0; 
    var style = element.style; 
    do { 
     style[property] = prefix[i] + value; 
     i += 1; 
    } 
    while(style[property] !== prefix[i] + value && i < prefix.length); 
}