javascript - width of div is not increasing -
यह मेरा कोड है:
& lt; script & gt; Var change = function () {alert ("sam"); (Var i; i & gt; = 200; i ++) के लिए {var z = स्ट्रिंग (i); Var x = document.getElementById ("div1"); X.style.width = z; }}; & Lt; / स्क्रिप्ट & gt; & Lt; शैली प्रकार = "टेक्स्ट / सीएसएस" & gt; # Div1 {width: 100px; ऊंचाई: 100 पिक्सेल; पृष्ठभूमि का रंग: #ccc; } & Lt; / style & gt; & Lt; div id = "div1" & gt; & lt; / div & gt; & Lt; बटन onclick = "परिवर्तन ();" & gt; / बटन और gt; लीटर और क्लिक करें वास्तव में यह कोड क्या करता है, यह चौड़ाई बढ़ेगी जैसे कि jquery में हम चौड़ाई बढ़ाते हैं, क्योंकि इसकी चौड़ाई फिसलने है .. मैं इस चौड़ाई जावास्क्रिप्ट की तरह कोशिश कर रहा हूं।
और जब मैंने इसे Google क्रोम में जांच लिया, तो यह कोई गलती नहीं दिखाई या त्रुटि, लेकिन उस डिवाइन की चौड़ाई में परिवर्तन नहीं हुआ है और यह ध्यान दिया जाना चाहिए कि, यह sam को सतर्क कर दिया! कृपया मेरी गलती मुझे बताओ ... धन्यवाद!
सब कुछ थोड़ा अधिक जटिल होने जा रहा है:
var परिवर्तन = समारोह () {var div = document.getElementById ("div1"), startWidth = div.offsetWidth; के लिए (var i = 0; i & lt; = 100; i ++) {(फ़ंक्शन (i) {setTimeout (फ़ंक्शन () {div.style.width = startWidth + i + 'px';}, i * 10)}) (I) // एक सेट में सेट सेट टाइमआउट}}; एक जोड़ी नोट्स।
1)। आपको प्रारंभिक चौड़ाई की गणना करने की आवश्यकता है। आप इसके लिए offsetwidth संपत्ति का उपयोग कर सकते हैं। 2)। सुनिश्चित करें कि आप लूप में div तत्व को नहीं खोजते हैं। 3)। स्लाइडिंग प्रभाव के लिए आपको एक क्लोजर और setTimeout की आवश्यकता है i चर के एक स्नैपशॉट (वर्तमान में लूप में) के साथ एक सेटटाइमआउट बाइंड करने के लिए बंद किया जाता है। 4)। लूप i & gt; = 200 में i & lt; = 200 होना चाहिए। डेमो:
Comments
Post a Comment