className & classList

in-imitable · in-imitable · commit c4b561641aa5 · 2022-09-24T16:01:38.000+05:30
diff --git a/Chapter 8/45_script.js b/Chapter 8/45_script.js
@@ -0,0 +1,7 @@
+//className & classList
+
+first.className = "text-black red"
+first.classList.add("red")
+first.classList.remove("red")
+first.classList.contains("red")
+first.classList.toggle("red")
diff --git a/Chapter 8/index.html b/Chapter 8/index.html
@@ -10,11 +10,13 @@
 
 <body>
     <!-- <span id="first" hidden><b>Hi</b>This is a span</span> -->
+    <!-- <script src="41_script.js"></script> -->
 
     <!-- <div id="first" class="hey" data-game="mario" data-player="atul">
         Hey I am first container
     </div>
   Hello world -->
+  <!-- <script src="42_script.js"></script> -->
 
   <!-- I am start of this container (outer)
   <div class="container">
@@ -23,13 +25,15 @@
     I am end of this container (inner)
   </div>
   I am end of this container (outer) -->
+  <!-- <script src="43_script.js"></script> -->
   
-  <div id="first">Hey I am first</div>
+  <!-- <div id="first">Hey I am first</div> -->
+  <!-- <script src="44_script.js"></script> -->
 
-  <!-- <script src="41_script.js"></script> -->
-  <!-- <script src="42_script.js"></script> -->
-  <!-- <script src="43_script.js"></script> -->
-  <script src="44_script.js"></script>
+  <div id="first" class="yellow text-dark">
+    <span>Hey I am good</span>
+  </div>
+  <script src="45_script.js"></script>
 
 </body>
 
diff --git a/Chapter 8/style.css b/Chapter 8/style.css
@@ -1,4 +1,18 @@
 html, body {
     height: 100%;
     width: 100%;
+}
+
+.yellow {
+    background-color: yellow;
+    color: white;
+}
+
+.red {
+    background-color: red;
+    color: white;
+}
+
+.text-dark {
+    color: black;
 }
