शुद्ध जावास्क्रिप्ट का उपयोग कर स्टाइल सेट करने का सबसे प्रभावी तरीका?

Question

जावास्क्रिप्ट में तत्वों पर एकाधिक स्टाइल सेट करने का सबसे प्रभावी तरीका क्या है?

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

सुंदर है कि, आप एक खड़ी काम इस्तेमाल कर सकते हैं:

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

चूंकि इन गुणों जहाँ हम विक्रेता विशिष्ट संस्करण है के कई हैं, तो आप एक पुन: प्रयोज्य समारोह है कि यह करता है पर विचार हो सकता, उदाहरण के लिए:

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

या, बजाय धराशायी शैली का उपयोग के बाद से हम पहले से ही पहचानकर्ता के बजाय तार का उपयोग कर रहे:

012,

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

---

साइड नोट्स:

• वहाँ एक for बयान में समापन } के बाद कोई ; है।
• var किसी फ़ंक्शन में कहीं भी फ़ंक्शन-व्यापी है, इसलिए फ़ंक्शन के अंदर गैर-फ़ंक्शन ब्लॉक के भीतर var घोषित करना (थोड़ा) कोड के पाठक को भ्रामक है; विवरण: Poor, misunderstood var

Answer 2

आप इस कोशिश कर सकते:

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

v = 'opacity 1s' आप पाश के माध्यम से जाना हर समय निर्धारित करने की कोई ज़रूरत नहीं है, बस पाश से पहले एक बार यह निर्धारित किया है। और जब तक हम v की घोषणा को आगे बढ़ा रहे हैं, ध्यान दें कि जेएस के पास केवल कार्यक्षेत्र है, इसलिए लूप में चर घोषित करने से वास्तव में उस लूप पर उनके दायरे को सीमित नहीं किया जाता है।

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

तो तुम फोन कर सकते हैं:

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