जावास्क्रिप्ट एचटीएमएल डॉम - सीएसएस परिवर्तन

HTML DOM JavaScript को HTML एलिमेंट की शैली बदलने की अनुमति देता है。

HTML शैली बदलना

यदि आप HTML एलिमेंट की शैली बदलना चाहते हैं, तो इस वाक्यांश का उपयोग करें:

document.getElementById(id).style.गुण = नया स्टाइल

नीचे का उदाहरण <p> एलिमेंट का शैलीः

इन्स्टांस

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>ऊपरी पैराग्राफ एक स्क्रिप्ट द्वारा बदला गया है。</p>
</body>
</html>

स्वयं अभियान

इवेंट का उपयोग करना

HTML DOM आपको इवेंट होने पर कोड कार्यान्वित करने की अनुमति देता है。

जब 'कुछ ना कुछ' एचटीएमएल एलिमेंट पर होता है, तो ब्राउज़र इवेंट बना देता है:

  • किसी एलिमेंट पर क्लिक करने पर
  • पृष्ठ लोड होने पर
  • इनपुट फील्ड बदलने पर

आपको अगले अध्याय में इवेंट के बारे में अधिक जानकारी मिलेगी。

इस इन्स्टांस में, उपयोगकर्ता बटन पर क्लिक करने पर id="id1" के एचटीएमएल एलिमेंट की शैली को बदला जाएगा:

इन्स्टांस

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">मेरा शीर्षक 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
क्लिक मुझे!
</button>
</body>
</html>

स्वयं अभियान

अधिक उदाहरण

Visibility
एलिमेंट को अदृश्य बनाना।क्या आप इस एलिमेंट को दिखाना चाहते हैं?

एचटीएमएल डॉम स्टाइल ऑब्जेक्ट संदर्भ दस्तावेज

सभी एचटीएमएल डॉम स्टाइल गुणों के लिए हमारे एचटीएमएल डॉम स्टाइल ऑब्जेक्ट संदर्भ दस्तावेज.