जावास्क्रिप्ट के साथ सीएसएस वर्ग विशेषताएँ बदलें?

मैं एक CSS वर्ग परिभाषित किया गया है, इसे कहते:जावास्क्रिप्ट के साथ सीएसएस वर्ग विशेषताएँ बदलें?

<style type="text/css"> 
.Foo { position: fixed; left: 50px; top: 50px; } 
</style>

जहां मैं बिल्कुल स्क्रीन पर एक तत्व की स्थिति। मेरे वेब पेज के निष्पादन के दौरान, मैं कई तत्वों को बना और हटाता हूं और उन्हें Foo कक्षा देता हूं। जब मैं ब्राउज़र का आकार बदलता हूं, तो Foo वर्ग पर left और top मानों को बदलना चाहता हूं, इसलिए की स्थितिFoo गणना गणना के परिणामस्वरूप बदल दी गई है।

मैं स्टाइलशीट को बस बदलना नहीं चाहता, मैं एक मूल्य की गणना करना चाहता हूं और सभी मौजूदा और भविष्य Foo तत्वों की नई गणना left और top मान है।

इस साइट पर एक उदाहरण है, लेकिन कोड काफी जटिल है। http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html

क्या मूल रूप से प्रोग्रामेटिक रूप से Foo को बदलने के लिए एक अच्छा, साफ तरीका है?

धन्यवाद!

स्रोत

2009-02-24 Mike

मेरे समाधान पर आपकी टिप्पणी के संबंध में, आप एक नया जोड़ते समय अंतिम जोड़ा गया स्टाइल टैग हटा सकते हैं, या हर बार उसी स्टाइल टैग की सामग्री को संपादित कर सकते हैं। –

मैंने अपना जवाब दिखाया कि मेरा क्या मतलब है। –

मुझे लगता है कि यह तुम क्या चाहते है:

<script> 
var style; 
function changeFoo(left, top) { 
    if(typeof style == 'undefined') { 
     var append = true; 
     style = document.createElement('style'); 
    } else { 
     while (style.hasChildNodes()) { 
      style.removeChild(style.firstChild); 
     } 
    } 
    var head = document.getElementsByTagName('head')[0]; 
    var rules = document.createTextNode(
     '.Foo { left: ' + left + 'px; top: ' + top + 'px; }' 
    ); 

    style.type = 'text/css'; 
    if(style.styleSheet) { 
     style.styleSheet.cssText = rules.nodeValue; 
    } else { 
     style.appendChild(rules); 
    } 
    if(append === true) head.appendChild(style); 
} 
</script>

इस कोड this question में उपलब्ध कराई गई एक जवाब है जो बहुत है कि तुम क्या पूछा के समान है से संशोधित किया गया था। जब भी आपको सभी की स्थिति बदलने की आवश्यकता होती है। फू तत्व, आप केवल changeFoo (newLeftValue, newTopValue) को कॉल कर सकते हैं; - इसके आसपास पहली बार <style> तत्व बनाएगा और इसे दस्तावेज़ के <head> में जोड़ें। बाद की कॉल केवल <style> तत्व खाली कर दी जाएगी जो पहले ही जोड़ दी गई थी और नया नियम जोड़ दिया गया था।

स्रोत

2009-02-24 02:20:23

मुझे लगता है कि यह काम करेगा, लेकिन दोष यह है कि अगर फू अक्सर बदलता है, तो कहें, 100 बार - पेज पर फू के लिए 100 परिभाषाएं होंगी (कैस्केडिंग प्रभाव के साथ नवीनतम प्रभाव प्रभावी हो सकता है)। मुझे नहीं लगता कि प्रदर्शन के लिए अच्छा है। – Mike

जावास्क्रिप्ट के साथ सीएसएस वर्ग विशेषताएँ बदलें?

उत्तर

संबंधित मुद्दे