लोड हो रहा है...

CSS स्टाइल बदलना

स्टूडियो की दीवार पर पेंट का एक चिप्स पहले से है। शीर्षक Oak है और नमूना open कहता है। स्टाइलशीट की #swatch नियम color को navy और font-size को 16px रखती है। क्लास dusk अभी नमूने पर नहीं है। उसका नियम font-style: italic है। JavaScript से CSS बदलने का मतलब इनलाइन स्टाइल लिखना या वही क्लास जोड़ना है। शब्द open अपनी जगह रहता है।
element.style सिर्फ इनलाइन घोषणा दिखाता है। इसलिए लिखने से पहले swatch.style.color और swatch.style.fontSize खाली स्ट्रिंग हैं। इस्तेमाल किया गया आकार getComputedStyle(swatch).fontSize देता है: 16px।
swatch.style.color = "teal" और swatch.style.fontSize = "22px" वे इनलाइन मान रख देते हैं। बिंदु वाला style.font-size सिंटैक्स त्रुटि है। पृष्ठभूमि setProperty("background-color", "wheat") से लगती है। उसके बाद getPropertyValue("background-color") और style.backgroundColor दोनों wheat पढ़ते हैं।
classList.add("dusk") सिर्फ क्लास जोड़ता है। style.color teal रहता है, style.fontStyle खाली रहता है, और getComputedStyle(swatch).fontStyle italic हो जाता है।
एक अलग प्रयोग है: cssText = "color: maroon;"। यह पंक्ति पूरी इनलाइन घोषणा बदल देती है। इनलाइन आकार और पृष्ठभूमि खाली हो जाते हैं, क्लास dusk रह जाती है। पेज डेमो यह पंक्ति नहीं चलाता। वह teal बचाता है, फिर removeProperty("color") सिर्फ इनलाइन रंग हटाता है। चिप्स के नीचे की पंक्ति teal / 22px / empty / dusk पढ़ती है। नमूने का पाठ अब भी open है।

स्टाइल घोषणा, चिप्स पर नया वाक्य नहीं

पिछला पेज textContent, innerHTML और insertAdjacentHTML लिखता था और फेरी पर्ची के शब्द बदलता था। यहाँ नमूने पर textContent नहीं देते, टैग नहीं पढ़ते, और ढूँढने के तरीके नहीं गिनते। getElementById सिर्फ चिप्स देता है। पाठ इनलाइन स्टाइल और क्लास टोकन का है।

हर लिखना नमूने पर क्या छोड़ता है

नमूना शब्द open से शुरू होता है। navy और 16px स्टाइलशीट से आते हैं, इनलाइन स्टाइल अभी नहीं है। पंक्तियाँ क्रम से पढ़ो। cssText वाली पंक्ति अलग प्रयोग है। पेज डेमो removeProperty पर रुकता है और वह मिटाना नहीं चलाता।

📊 हर लिखना नमूने पर क्या छोड़ता है

लिखना इनलाइन स्ट्रिंग अभी भी शीट या क्लास से आसान भ्रम
अभी कुछ नहीं color और fontSize "" हैं गणना किया fontSize 16px है; इस्तेमाल रंग navy style.color से navy पढ़ना
style.color = "teal" और style.fontSize = "22px" teal और 22px पृष्ठभूमि अभी इनलाइन नहीं style.font-size, जो पार्स नहीं होता
setProperty("background-color", "wheat") backgroundColor wheat है रंग अभी teal camelCase की जगह नाम background-color
classList.add("dusk") fontStyle "" रहता है; रंग teal गणना किया fontStyle italic style.fontStyle में italic की उम्मीद
removeProperty("color") color फिर "" fontSize 22px रहता है आकार के 16px लौटने का खयाल
style.cssText = "color: maroon;" रंग maroon; fontSize और पृष्ठभूमि "" क्लास dusk रहती है सोचना कि cssText क्लास हटाता है

element.style केवल इनलाइन घोषणा है। स्टाइलशीट का नियम वहाँ तब तक नहीं दिखता जब तक स्क्रिप्ट उसे इनलाइन स्टाइल में न कॉपी करे। getComputedStyle इस्तेमाल किया मान पढ़ता है, जब शीट, क्लास और इनलाइन स्टाइल जुड़ चुके हों। एक इनलाइन गुण उसी गुण पर शीट से जीतता है। classList क्लास टोकन बदलता है। वह style.color या style.fontStyle नहीं लिखता। cssText पूरे style गुण को एक स्ट्रिंग से बदल देता है। removeProperty एक इनलाइन गुण हटाता है और बाकी छोड़ देता है।

लिखने से पहले चिप्स पढ़ो

फ़ाइल शीर्षक Oak, पाठ open और ऊपर की शीट के साथ खुलती है। अभी कोई असाइनमेंट नहीं चला। पहले तीन लॉग इनलाइन स्टाइल पूछते हैं। चौथा इस्तेमाल किया आकार पूछता है।

चिप्स पढ़ना

javascript 
let swatch = document.getElementById("swatch");
console.log(swatch.textContent);
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(getComputedStyle(swatch).fontSize);

लॉग हैं open, खाली स्ट्रिंग, खाली स्ट्रिंग, और 16px। इस्तेमाल किया रंग navy है, ब्राउज़र उसे rgb() रूप में बताता है, शब्द navy में नहीं। style.color अब भी खाली है, इसलिए वह लॉग navy नहीं है। शीर्षक Oak दूसरा एलिमेंट है। आगे की लिखावट शब्द open नहीं बदलती।

camelCase इनलाइन मान लिखता है

color और fontSize स्टाइल घोषणा के गुण हैं। CSS नाम font-size JavaScript में fontSize बनता है। बिंदु वाला style.font-size घटाव है, इसलिए फ़ाइल उसका इस्तेमाल नहीं करती।

camelCase

javascript 
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);

लॉग हैं teal, 22px, और खाली स्ट्रिंग। पृष्ठभूमि अभी सेट नहीं हुई। इस्तेमाल किया फ़ॉन्ट आकार अब 22px है, क्योंकि इनलाइन मान शीट के 16px पर भारी पड़ता है। नमूने का शब्द अब भी open है।

हाइफ़न वाला नाम setProperty से जाता है

setProperty CSS गुण का नाम लेता है, हाइफ़न सहित। getPropertyValue वही नाम पढ़ता है। गुण backgroundColor वही मान पढ़ता है जो अभी रखा।

हाइफ़न वाला नाम

javascript 
let swatch = document.getElementById("swatch");
swatch.style.setProperty("background-color", "wheat");
console.log(swatch.style.getPropertyValue("background-color"));
console.log(swatch.style.backgroundColor);

दोनों लॉग wheat हैं। color अब भी teal है और fontSize अब भी 22px। यह कॉल एक इनलाइन गुण जोड़ती है। पहले वाले नहीं मिटाती।

क्लास style.fontStyle नहीं भरती

.dusk कहता है font-style: italic। क्लास जोड़ने से टोकन dusk एलिमेंट पर आ जाता है। italic मान स्टाइलशीट के नियम में रहता है, इसलिए इनलाइन स्ट्रिंग fontStyle खाली रहती है। इनलाइन रंग अब भी teal है। क्लास ने उसे नहीं बदला।

क्लास जोड़ना

javascript 
let swatch = document.getElementById("swatch");
swatch.classList.add("dusk");
console.log(swatch.classList.contains("dusk"));
console.log(swatch.style.color);
console.log(swatch.style.fontStyle);
console.log(getComputedStyle(swatch).fontStyle);

लॉग हैं true, teal, खाली स्ट्रिंग, और italic। contains टोकन देखता है। style.fontStyle इनलाइन घोषणा देखता है। getComputedStyle इस्तेमाल किया मान देखता है। ये तीन पढ़ना अलग हैं।

cssText पूरा इनलाइन स्टाइल बदल देता है

यह ब्लॉक अलग प्रयोग है। इसे तभी चलाओ जब teal, 22px, wheat और dusk पहले से बैठे हों। cssText नया style गुण लिखता है और हर वह इनलाइन गुण गिरा देता है जो उस स्ट्रिंग में नहीं है। नीचे का पेज डेमो इस पंक्ति को नहीं रखता।

इनलाइन स्टाइल बदलना

javascript 
let swatch = document.getElementById("swatch");
swatch.style.cssText = "color: maroon;";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
console.log(swatch.classList.contains("dusk"));

लॉग हैं maroon, खाली स्ट्रिंग, खाली स्ट्रिंग, और true। इनलाइन 22px और wheat चले गए। क्लास dusk अभी है, क्योंकि cssText style गुण छूता है, class गुण नहीं। नमूने का पाठ अब भी open है।

चिप्स के नीचे एक पंक्ति

स्क्रिप्ट body के अंत में है, जब चिप्स और स्टाइलशीट मौजूद हों। वह teal, 22px और wheat रखता है, dusk जोड़ता है, शब्द teal बचाता है, फिर सिर्फ इनलाइन रंग हटाता है। cssText नहीं देता। खाली इनलाइन रंग को शब्द empty लिखता है ताकि पंक्ति पढ़ी जा सके।

पेज डेमो — पेंट चिप्स

html 
<!DOCTYPE html>
<html>
<head>
<title>css style — page</title>
<style>
#swatch { color: navy; font-size: 16px; }
.dusk { font-style: italic; }
</style>
</head>
<body>
<article id="wall">
<h2 id="chip">Oak</h2>
<p id="swatch">open</p>
<p id="line">…</p>
</article>
<script>
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
swatch.style.setProperty("background-color", "wheat");
swatch.classList.add("dusk");
let saved = swatch.style.color;
swatch.style.removeProperty("color");
let inlineNow = swatch.style.color === "" ? "empty" : swatch.style.color;
let mark = swatch.classList.contains("dusk") ? "dusk" : "no";
document.getElementById("line").textContent = saved + " / " + swatch.style.fontSize + " / " + inlineNow + " / " + mark;
</script>
</body>
</html>

पंक्ति teal / 22px / empty / dusk पढ़ती है। saved removeProperty से पहले का teal रखता है। कॉल के बाद style.color खाली है और style.fontSize अब भी 22px है। पृष्ठभूमि अब भी wheat है। क्लास टोकन अब भी dusk है, इसलिए इस्तेमाल font-style italic है। इस्तेमाल रंग शीट पर लौटता है, navy, क्योंकि इनलाइन रंग चला गया। नमूने का पाठ अब भी open है। अगला पेज नए एलिमेंट बनाता है। इन स्टाइल गुणों को लिखने का दूसरा तरीका नहीं लाता।

चिप्स जाँचो

  1. पाठ, दो इनलाइन स्ट्रिंग और गणना किया फ़ॉन्ट आकार लॉग करो: open, दो खाली स्ट्रिंग और 16px
  2. color को teal और fontSize को 22px रखो, फिर teal, 22px और खाली backgroundColor की उम्मीद करो
  3. पृष्ठभूमि setProperty से रखो और दोनों पढ़ने से wheat की उम्मीद करो, फिर dusk जोड़ो और true, teal, खाली fontStyle और गणना किया italic की उम्मीद करो
  4. अलग प्रयोग में cssText को रंग maroon दो और maroon, खाली fontSize, खाली पृष्ठभूमि और dusk का true रहना देखो
  5. पेज पंक्ति पढ़ो और teal / 22px / empty / dusk की उम्मीद करो, नमूने का पाठ पढ़ो और open की उम्मीद करो

इस चिप्स पर चूक

पेज खुलता रहता है। असाइनमेंट ने गलत तरह का मान लिखा।

  • शुरू में style.color पढ़कर navy की उम्मीद
  • swatch.style.font-size लिखना, जिसे पार्सर ठुकराता है
  • उम्मीद कि classList.add("dusk") italic को style.fontStyle में रखेगा
  • उम्मीद कि वही क्लास style.color को teal से हटा देगी
  • cssText देकर इनलाइन आकार 22px के रहने की उम्मीद
  • cssText देकर क्लास dusk के मिटने की उम्मीद
  • removeProperty("color") बुलाकर fontSize के 16px लौटने की उम्मीद
  • यहाँ नमूने पर textContent रखना; पिछला पेज शब्द बदलता था
  • यहाँ createElement बुलाना; अगला पेज नए नोड बनाता है

ये साथ ले जाओ

  • element.style इनलाइन घोषणा पढ़ता है; शुरू में style.color खाली है और इस्तेमाल आकार 16px है
  • style.color और style.fontSize teal और 22px रखते हैं
  • setProperty("background-color", "wheat") और style.backgroundColor एक ही मान हैं
  • classList.add("dusk") style.fontStyle को खाली छोड़ता है और इस्तेमाल स्टाइल italic होता है
  • cssText = "color: maroon;" बाकी इनलाइन मान मिटाता है और क्लास रखता है
  • removeProperty("color") सिर्फ रंग हटाता है, इसलिए पेज पंक्ति अब भी 22px दिखा सकती है
  • पंक्ति teal / 22px / empty / dusk पढ़ती है और नमूने का पाठ open रहता है

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
8
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 47 का 47
Javascript ट्यूटोरियल