जावास्क्रिप्ट में एलिमेंट्स के CSS स्टाइल कैसे बदलें?

JavaScript getElementById(), getElementByClassName() जैसे कुछ मेथड्स का उपयोग करके एलिमेंट्स के CSS स्टाइल जैसे रंग, फॉन्ट साइज आदि को बदल सकता है।

निम्नलिखित उदाहरण में getElementById() मेथड का उपयोग करके एलिमेंट्स के फॉन्ट स्टाइल और फॉन्ट साइज को बदला गया है।

उदाहरण-1

निम्नलिखित उदाहरण में, स्टाइल कमांड "style.fontSize" और "style.fontStyle" का उपयोग करके, प्रदान किए गए टेक्स्ट को "35px" फॉन्ट साइज और "इटैलिक" फॉन्ट स्टाइल में बदला गया है।

<html> <body>    <p id="size">JavaScript can change the style of an HTML element.</p>    <p id="style">JavaScript can change the style of an HTML element.</p>    <button type="button"    onclick="document.getElementById('size').style.fontSize='35px'">Size</button>    <button type="button" onclick="document.getElementById('style') .style.fontStyle='italic'">Style</button> </body> </html>

उपरोक्त कोड निष्पादित करने पर हमें ब्राउज़र पर निम्नलिखित मिलेगा।

उपरोक्त बटन क्लिक करने पर पहला टेक्स्ट अलग फॉन्ट साइज में और दूसरा टेक्स्ट अलग फॉन्ट स्टाइल में बदल जाएगा जैसा कि आउटपुट में दिखाया गया है।

आउटपुट

उदाहरण-2

निम्नलिखित उदाहरण में स्टाइल कमांड "style.color" का उपयोग करके टेक्स्ट का रंग नीला कर दिया गया है।

<html> <body>    <p id="color">JavaScript can change the color of an HTML element.</p>    <button type="button" onclick="document.getElementById('color').    style.color='blue'">Color Me</button> </body> </html>

उपरोक्त कोड निष्पादित करने पर हमें ब्राउज़र विंडो पर निम्नलिखित मिलेगा।

"Color Me" बटन पर क्लिक करने पर प्रदान किए गए टेक्स्ट का रंग आउटपुट में दिखाए अनुसार 'नीला' हो जाएगा।

आउटपुट