Saf javascript kullanarak stili ayarlamanın en etkili yolu?

Question

Javascript öğelerinde birden fazla stil ayarlamak için en etkili yol hangisidir? o Hemen hemen

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

, bir yığılmış atama kullanabilirsiniz: Biz satıcıya özgü sürümleri bu özelliklerin birçoğuna olduğundan

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

, bu yapan bir yeniden kullanılabilir işlev düşünebilirsiniz, örneğin:

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

Ya biz zaten dizeleri yerine tanımlayıcıları kullandığınız beri yerine kesikli stilini kullanarak:

Sonra

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

:

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

---

Yan notlar: Bir for açıklamada kapanış } sonra hiç ; var

• . herhangi bir yerde işlev
• var
fonksiyonu (hafifçe) kod okuyucusuna yanıltıcı içinde çok işlev olmayan blokları içinde var ilan fonksiyon geniştir; ayrıntıları: Poor, misunderstood var

Answer 2

Bu deneyebilirsiniz: v = 'opacity 1s' Eğer döngü geçmesi her zaman ayarlamak gerek yoktur

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

var, sadece döngü önce bir kez ayarlayın. Ve v bildirgesini taşıdığımız sürece, JS'nin yalnızca işlev kapsamı olduğuna dikkat edin, böylece bir döngüdeki değişkenleri bildirme aslında kapsamlarını bu döngüyle sınırlamaz. Belki bir işlevde

Answer 3

:

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

Yani arayabilirsiniz: V` statik

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