एकाधिक रिफ्लो से बचने के लिए बैच में एकाधिक सीएसएस शैलियों को लागू करने का कोई तरीका है?

Question

मुझे पता है कि जावास्क्रिप्ट के माध्यम से तत्व की शैली को बदलने से सीधे एक रिफ्लो होगा। हालांकि, मैं सोच रहा था कि बैच में कई स्टाइल मानों को केवल एक रिफ्लो के साथ बदलना संभव है?

Answer 1

नहीं सीधे लेकिन वहाँ यहाँ रीफ़्लो के प्रभाव को कम पर कुछ अच्छे सुझाव हैं:

http://dev.opera.com/articles/view/efficient-javascript/?page=3

संक्षेप में, कुछ इस तरह का प्रयास करें:

दूसरा दृष्टिकोण एक परिभाषित करने के लिए किया जाता है तत्व के लिए शैली विशेषता शैलियों को एक एक के रूप में निर्दिष्ट करने के बजाय। अक्सर यह गतिशील परिवर्तन जैसे एनिमेशन, के लिए अनुकूल है जहां नई शैलियों को पहले से ज्ञात नहीं किया जा सकता है। यह शैली ऑब्जेक्ट की cssText संपत्ति का उपयोग करके या setAttribute का उपयोग करके किया जाता है। इंटरनेट एक्सप्लोरर दूसरे संस्करण की अनुमति नहीं देता है, और पहले की आवश्यकता है। ओपेरा 8 समेत कुछ पुराने ब्राउज़र, दूसरे दृष्टिकोण की आवश्यकता है, और पहले को समझें नहीं। तो आसान तरीका यह जांचना है कि पहला संस्करण समर्थित है और इसका उपयोग करें, तो को दूसरी बार वापस गिरें।

var posElem = document.getElementById('animation'); 
var newStyle = 'background: ' + newBack + ';' + 
    'color: ' + newColor + ';' + 
    'border: ' + newBorder + ';'; 
if(typeof(posElem.style.cssText) != 'undefined') { 
    posElem.style.cssText = newStyle; // Use += to preserve existing styles 
} else { 
    posElem.setAttribute('style',newStyle); 
} 

Answer 2

आप jQuery उपयोग कर रहे थे, यह एक .css समारोह आप एक बार में एक से अधिक शैली को जोड़ने के लिए अनुमति देता है कि है:

$ ('element').css({'color':'red', 'border':'#555 solid thin'});

Answer 3

आप एक सीएसएस में सभी शैलियों डाल सकता है वर्ग

.foo { background:#000; color:#fff; ... } 

और फिर className संपत्ति के लिए असाइन करें

// javascript 
var your_node = document.getElementById('node_id'); 
your_node.className = 'foo' 

कि केवल एक ही रीपेंट/पुनर्प्रवाहित

Answer 4

उत्प्रेरित करने चाहिए तुम्हें पता है, के लिए 'छुपा' तत्व की दृश्यता सेट कर सकता है तो शैलियाँ लागू है और फिर इसे फिर से दिखाई देने।

Answer 5

उपयोग:

document.getElementById('elemnt_ID').setAttribute('style','color:white; margin:5px;');