how to check the names of the classes within the code? Also how to add/replace/get the length of the classList and toggle various events using the classList method in Javscript
how to check the names of the classes within the code? Also how to add/replace/get the length of the classList and toggle various events using the classList method in Javscript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
<script src="main.js"></script>
</head>
<body>
<div id="outer">
<h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px"> RUSTIC TRAVEL JUNKIE</h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. </p>
<button id="inner">CLICK ME</button>
</div>
<script>
document.getElementById("outer").classList.add("classStyle","classColor");
// var a = document.getElementById("outer").classList;
// console.log(a);
//now i want to toggle one of the classes i.e classStyle
document.getElementById("outer").addEventListener("click", abc);
function abc() {
// document.getElementById("outer").classList.toggle("classStyle");
// now i want to see the elements of class item wise
// var a = document.getElementById("outer").classList.item(1);
var a = document.getElementById("outer").classList.contains("classStyle");
console.log(a);
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
<script src="main.js"></script>
</head>
<body>
<div id="outer">
<h1 id="selector" style="border: 2px solid dodgerblue; padding : 2px"> RUSTIC TRAVEL JUNKIE</h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. </p>
<button id="inner">CLICK ME</button>
</div>
<script>
document.getElementById("outer").classList.add("classStyle","classColor");
// var a = document.getElementById("outer").classList;
// console.log(a);
//now i want to toggle one of the classes i.e classStyle
document.getElementById("outer").addEventListener("click", abc);
function abc() {
// document.getElementById("outer").classList.toggle("classStyle");
// now i want to see the elements of class item wise
// var a = document.getElementById("outer").classList.item(1);
var a = document.getElementById("outer").classList.contains("classStyle");
console.log(a);
}
</script>
</body>
</html>
Comments
Post a Comment
I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!