Il modo più efficace per impostare lo stile usando puro javascript?

Question

Qual è il modo più efficiente per impostare più stili sugli elementi in javascript?

for (i=0;i<=lastSelector;i++) { 
var e = mySelector[i], 
v = 'opacity 1s'; 
e.style.WebkitTransition = v; 
e.style.MozTransition = v; 
e.style.OTransition = v; 
e.style.MsTransition = v; 
e.style.transition = v; 
e.style.opacity = 0; 
}; 

Answer 1

Praticamente questo, si potrebbe utilizzare un incarico impilati:

for (i=0;i<=lastSelector;i++) { 
    var e = mySelector[i]; 
    e.style.WebkitTransition = 
    e.style.MozTransition = 
     e.style.OTransition = 
     e.style.MsTransition = 
      e.style.transition = 
      'opacity 1s'; 
    e.style.opacity = 0; 
} 

Dal momento che ci sono parecchi di queste proprietà in cui abbiamo versioni specifiche del fornitore, si potrebbe considerare una funzione riutilizzabile che fa questo, ad esempio:

function setMultiVendorProp(style, propName, value) { 
    // Set the non-vendor version 
    style[propName] = value; 

    // Make first char capped 
    propName = propName.substring(0, 1).toUpperCase() + propName.substring(1); 

    // Set vendor versions 
    style["Webkit" + propName] = value; 
    style["Moz" + propName] = value; 
    style["O" + propName] = value; 
    style["Ms" + propName] = value; 

    // Done 
    return value; 
} 

O utilizzando lo stile tratteggiato invece, dal momento che stiamo già utilizzando stringhe piuttosto che identificatori:

function setMultiVendorProp(style, propName, value) { 
    // Set the non-vendor version 
    style[propName] = value; 

    // Set vendor versions 
    style["-webkit-" + propName] = value; 
    style["-moz-" + propName] = value; 
    style["-o-" + propName] = value; 
    style["-ms-" + propName] = value; 

    // Done 
    return value; 
} 

Poi:

for (i=0;i<=lastSelector;i++) { 
    var e = mySelector[i]; 
    setMultiVendorProp(e.style, "transition", "opacity 1s"); 
    e.style.opacity = 0; 
} 

---

note collaterali:

• non c'è ; dopo la chiusura } in un comunicato for.
• var ovunque in una funzione è a livello di funzione, quindi dichiarare var all'interno di blocchi non funzionali all'interno della funzione è (leggermente) fuorviante per il lettore del codice; Dettagli: Poor, misunderstood var

Answer 2

si potrebbe provare questo:

var i, 
    es, 
    v = 'opacity 1s'; 
for (i=0;i<=lastSelector;i++) { 
    es = mySelector[i].style; 

    es.WebkitTransition = v; 
    es.MozTransition = v; 
    es.OTransition = v; 
    es.MsTransition = v; 
    es.transition = v; 
    es.opacity = 0; 
}; 

Non c'è bisogno di impostare v = 'opacity 1s' ogni volta che si passa attraverso il ciclo, basta impostare una volta prima del ciclo. E fintanto che stiamo spostando la dichiarazione di v, nota che JS ha solo l'ambito della funzione, quindi dichiarare le variabili in un ciclo non limita effettivamente il loro ambito a quel ciclo.

Answer 3

Forse in una funzione:

function setStyles(styles, element, value) 
{ 
    for(var i=0,l=styles.length;i<l;i++) 
     { 
      if(p in element.style) 
       element.style[p] = value; 
     } 
    }; 
} 

così si può chiamare:

var s = ['WebkitTransition','MozTransition','OTransition','MsTransition','transition']; 
for (i=0;i<=lastSelector;i++) { 
    var e = mySelector[i], 
    v = 'opacity 1s'; 
    setStyles(s,e,v); 
    e.style.opacity = 0; 
};