Najbardziej skuteczny sposób ustawiania stylu za pomocą czystego javascript?

Question

Jaki jest najbardziej skuteczny sposób ustawiania wielu stylów na elementy w 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

Dość dużo, że można użyć ułożone Zadanie:

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

Ponieważ istnieje kilka z tych właściwości, gdzie mamy wersje specyficznych dla dostawcy, można rozważyć wielokrotnego użytku funkcji, które wykonuje to, np:

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

lub za pomocą przerywanej styl zamiast, ponieważ jesteśmy już przy użyciu ciągów zamiast identyfikatorów:

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

Następnie:

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

---

notatki uboczne:

• Nie ma ; po zamknięciu } w for oświadczeniu.
• gdziekolwiek w funkcji jest o szerokości całej funkcji, więc deklarowanie var w blokach niefunkcyjnych wewnątrz funkcji jest (nieznacznie) wprowadzające w błąd czytelnikowi kodu; szczegóły: Poor, misunderstood var

Answer 2

można spróbować to:

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

Nie ma potrzeby ustawiania v = 'opacity 1s' każdym razem iść przez pętlę, wystarczy ustawić go raz przed pętlą. I tak długo, jak poruszamy deklarację v, zauważmy, że JS ma zasięg funkcji, więc deklarowanie zmiennych w pętli w rzeczywistości nie ogranicza ich zasięgu do tej pętli.

Answer 3

Może pracować w trybie:

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

Więc można nazwać:

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