📘 Lesson · Lesson 34

Changing HTML and CSS

HTML और CSS बदलना

textContent and innerHTML — changing content

<p id="demo">Hello</p>

let p = document.querySelector("#demo");

p.textContent = "New text";              // sets plain TEXT (safe)
p.innerHTML = "New <b>bold</b> text";   // parses HTML tags

// Reading works too:
console.log(p.textContent);              // "New bold text"

// ⚠ Danger — never put user input into innerHTML:
p.innerHTML = userComment;               // ✗ opens an XSS security hole
p.textContent = userComment;             // ✓ safe

textContent sets plain text; innerHTML sets text that the browser parses as HTML. If you write <b>hi</b> with textContent, the tags show literally as characters. With innerHTML, they become real bold formatting. That power carries a serious risk: never assign user-supplied content to innerHTML, because a malicious user could inject a <script> tag — a vulnerability called XSS (cross-site scripting). The rule: use textContent by default; reach for innerHTML only when you genuinely need to insert HTML you control.

Changing Styles Directly

let box = document.querySelector(".box");

box.style.color = "red";
box.style.backgroundColor = "yellow";    // ← camelCase, not background-color!
box.style.fontSize = "20px";             // ← units are required
box.style.display = "none";              // hide it

console.log(box.style.color);            // "red"

The .style property lets you set inline CSS directly from JavaScript. Two rules to remember. First, CSS property names become camelCase: background-color turns into backgroundColor, font-size into fontSize — because hyphens aren't allowed in JavaScript property names. Second, always include units: "20px", not 20. This approach works, but it writes inline styles, which have high specificity and mix your styling into your logic. For anything more than a quick tweak, the next section shows a much better way.

classList — the professional approach

/* CSS — define your states here */
.hidden { display: none; }
.active { background: blue; color: white; }

// JavaScript — just add or remove the class
let box = document.querySelector(".box");

box.classList.add("active");         // add a class
box.classList.remove("hidden");      // remove a class
box.classList.toggle("active");      // add if absent, remove if present
box.classList.contains("active");    // true / false

Instead of setting individual styles from JavaScript, define the look in CSS and just toggle a CLASS. This keeps styling in your stylesheet where it belongs, and JavaScript merely decides WHICH state applies. classList.toggle() is especially loved: one line turns a class on if it's off and off if it's on — perfect for dropdown menus, dark-mode switches, and accordions. This separation of concerns is how professional front-end code is written. Prefer classList over .style whenever you can.

Changing Attributes

let img = document.querySelector("img");
let link = document.querySelector("a");

img.src = "new-photo.jpg";               // direct property (common ones)
img.alt = "A new photo";
link.href = "https://codekafunda.in";

// The general way — works for ANY attribute:
img.setAttribute("src", "new-photo.jpg");
img.getAttribute("alt");                 // read it
img.removeAttribute("alt");              // remove it

// Custom data attributes:
box.dataset.userId = "12";               // becomes data-user-id="12"

Common attributes like src, href, id, and value can be read and written directly as properties. For anything else — or for custom attributes — use setAttribute(), getAttribute(), and removeAttribute(). There's also dataset, which reads and writes HTML data-* attributes; it's the standard way to attach custom data to an element (like storing an item's database id on its card).

Reading Input Values — the form essential

<input type="text" id="username">

let input = document.querySelector("#username");

console.log(input.value);           // whatever the user typed — ALWAYS a string
input.value = "Aman";               // set it programmatically

// Remember the type-conversion lesson!
let qty = document.querySelector("#qty").value;   // "3" (a string!)
let total = Number(qty) * 50;                     // ✓ 150 — convert first

let isChecked = document.querySelector("#agree").checked;   // true/false

.value reads (and sets) what's inside an input, textarea, or select — it's how every form in JavaScript works. And here's where an earlier lesson pays off: .value is ALWAYS a string, even for <input type="number">. Do maths with it directly and you'll get concatenation bugs ("3" + 5 = "35"). Always wrap it in Number() first. For checkboxes and radios, use .checked, which gives a real boolean. These two properties power all form handling.

Exam Corner

Q: Difference between textContent and innerHTML? textContent sets plain text; innerHTML parses HTML tags.

Q: Why avoid innerHTML with user input? It allows script injection (XSS). Use textContent instead.

Q: How is background-color written in JavaScript's style property? element.style.backgroundColor — camelCase.

Q: What does classList.toggle("active") do? Adds the class if absent, removes it if present.

Q: What type does input.value always return? A string — convert with Number() before doing maths.

textContent और innerHTML — content बदलना

<p id="demo">Hello</p>

let p = document.querySelector("#demo");

p.textContent = "New text";              // saada TEXT set karta (surakshit)
p.innerHTML = "New <b>bold</b> text";   // HTML tags parse karta

// Padhna bhi chalta hai:
console.log(p.textContent);              // "New bold text"

// ⚠ Khatra — user input kabhi innerHTML me mat daaliye:
p.innerHTML = userComment;               // ✗ XSS security chhed kholta
p.textContent = userComment;             // ✓ surakshit

textContent सादा text set करता है; innerHTML ऐसा text set करता है जिसे browser HTML के रूप में parse करता है. अगर आप textContent से <b>hi</b> लिखें, tags शाब्दिक रूप से characters दिखते हैं. innerHTML के साथ, वे असली bold formatting बनते हैं. उस शक्ति के साथ गंभीर जोखिम है: user का दिया content कभी innerHTML को assign मत कीजिए, क्योंकि दुर्भावनापूर्ण user <script> tag inject कर सकता है — XSS (cross-site scripting) नाम की भेद्यता. Rule: default में textContent use कीजिए; innerHTML तभी लीजिए जब सच में अपना नियंत्रित HTML डालना हो.

सीधे Styles बदलना

let box = document.querySelector(".box");

box.style.color = "red";
box.style.backgroundColor = "yellow";    // ← camelCase, background-color nahi!
box.style.fontSize = "20px";             // ← units zaruri hain
box.style.display = "none";              // chhupao

console.log(box.style.color);            // "red"

.style property आपको JavaScript से सीधे inline CSS set करने देती है. दो rules याद रखिए. पहला, CSS property नाम camelCase बनते हैं: background-color backgroundColor बनता है, font-size fontSize — क्योंकि JavaScript property नामों में hyphens allowed नहीं. दूसरा, हमेशा units शामिल कीजिए: "20px", 20 नहीं. यह approach चलता है, पर inline styles लिखता है, जिनकी high specificity है और आपकी styling को logic में मिला देता है. जल्दी tweak से ज़्यादा किसी भी चीज़ के लिए, अगला section कहीं बेहतर तरीका दिखाता है.

classList — professional approach

/* CSS — apne states yahan define karo */
.hidden { display: none; }
.active { background: blue; color: white; }

// JavaScript — bas class jodo ya hatao
let box = document.querySelector(".box");

box.classList.add("active");         // class jodo
box.classList.remove("hidden");      // class hatao
box.classList.toggle("active");      // nahi hai to jodo, hai to hatao
box.classList.contains("active");    // true / false

JavaScript से अलग-अलग styles set करने के बजाय, look को CSS में define कीजिए और बस CLASS toggle कीजिए. यह styling को आपकी stylesheet में रखता है जहां वह होनी चाहिए, और JavaScript सिर्फ तय करता है KAUN-SI state लागू हो. classList.toggle() खासकर प्रिय है: एक line class को बंद हो तो चालू और चालू हो तो बंद करती है — dropdown menus, dark-mode switches, और accordions के लिए perfect. यह separation of concerns ही है जैसे professional front-end code लिखा जाता है. जब भी हो सके .style पर classList पसंद कीजिए.

Attributes बदलना

let img = document.querySelector("img");
let link = document.querySelector("a");

img.src = "new-photo.jpg";               // seedhi property (common wale)
img.alt = "A new photo";
link.href = "https://codekafunda.in";

// Aam tarika — KISI BHI attribute par chalta hai:
img.setAttribute("src", "new-photo.jpg");
img.getAttribute("alt");                 // padho
img.removeAttribute("alt");              // hatao

// Custom data attributes:
box.dataset.userId = "12";               // data-user-id="12" banta hai

Common attributes जैसे src, href, id, और value सीधे properties के रूप में पढ़े और लिखे जा सकते हैं. बाकी किसी भी चीज़ के लिए — या custom attributes के लिए — setAttribute(), getAttribute(), और removeAttribute() use कीजिए. dataset भी है, जो HTML data-* attributes पढ़ता-लिखता है; element से custom data जोड़ने का यह standard तरीका है (जैसे item का database id उसके card पर रखना).

Input Values पढ़ना — form की ज़रूरत

<input type="text" id="username">

let input = document.querySelector("#username");

console.log(input.value);           // user ne jo type kiya — HAMESHA string
input.value = "Aman";               // programmatically set karo

// Type-conversion ka paath yaad kariye!
let qty = document.querySelector("#qty").value;   // "3" (string!)
let total = Number(qty) * 50;                     // ✓ 150 — pehle badlo

let isChecked = document.querySelector("#agree").checked;   // true/false

.value input, textarea, या select के अंदर जो है वह पढ़ता (और set करता) है — JavaScript में हर form ऐसे ही चलता है. और यहीं पहले का सबक फायदा देता है: .value HAMESHA string है, <input type="number"> के लिए भी. इससे सीधे गणित कीजिए और concatenation bugs मिलेंगे ("3" + 5 = "35"). हमेशा पहले Number() में लपेटिए. Checkboxes और radios के लिए .checked use कीजिए, जो असली boolean देता है. ये दो properties सारा form handling चलाती हैं.

Exam Corner

Q: textContent और innerHTML में अंतर? textContent सादा text set करता; innerHTML HTML tags parse करता.

Q: User input के साथ innerHTML क्यों टालें? यह script injection (XSS) की अनुमति देता है. बजाय textContent use कीजिए.

Q: JavaScript की style property में background-color कैसे लिखते हैं? element.style.backgroundColor — camelCase.

Q: classList.toggle("active") क्या करता है? Class न हो तो जोड़ता, हो तो हटाता है.

Q: input.value हमेशा किस type की value लौटाता है? String — गणित से पहले Number() से बदलिए.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

let box = document.querySelector(".box");

box.style.color = "red";
box.style.backgroundColor = "yellow";    // ← camelCase, not background-color!
box.style.fontSize = "20px";             // ← units are required
box.style.display = "none";              // hide it

console.log(box.style.color);            // "red"

// JavaScript — just add or remove the class
let box = document.querySelector(".box");

box.classList.add("active");         // add a class
box.classList.remove("hidden");      // remove a class
box.classList.toggle("active");      // add if absent, remove if present
box.classList.contains("active");    // true / false

let img = document.querySelector("img");
let link = document.querySelector("a");

img.src = "new-photo.jpg";               // direct property (common ones)
img.alt = "A new photo";
link.href = "https://codekafunda.in";

// The general way — works for ANY attribute:
img.setAttribute("src", "new-photo.jpg");
img.getAttribute("alt");                 // read it
img.removeAttribute("alt");              // remove it

// Custom data attributes:
box.dataset.userId = "12";               // becomes data-user-id="12"

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.