Dom CSS styling methods - By style, ClassName and by ClassList
Dom CSS styling methods - By style
<!-- SO OUT HERE WE WILL TRY TO ACCESS THE BORDER PROPERTY OF THE STYLE ATTRIBUTE. BY USE OF querySelectorAll() using style property -->
<!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>
</head>
<body>
<h1 id="selector" class="name" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1>
<div id="selector1" class="name">
<h1 style="border: padding : 2px">RTJ</h1>
</div>
<p>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. Eveniet, quisquam veritatis quo maxime labore nostrum consectetur eaque cumque distinctio vel doloremque sunt unde harum placeat, quam perferendis possimus similique laboriosam repellendus. Ut!</p>
<button onclick = "box()">CLICK ME</button>
<script>
function box(){
var a = document.querySelectorAll(".name");
a[0].style.color="blue";
a[1].style.color="green";
}
</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>
</head>
<body>
<h1 id="selector" class="name" style="border: 2px solid dodgerblue; padding : 2px">RUSTIC TRAVEL JUNKIE</h1>
<div id="selector1" class="name">
<h1 style="border: padding : 2px">RTJ</h1>
</div>
<p>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. Eveniet, quisquam veritatis quo maxime labore nostrum consectetur eaque cumque distinctio vel doloremque sunt unde harum placeat, quam perferendis possimus similique laboriosam repellendus. Ut!</p>
<button onclick = "box()">CLICK ME</button>
<script>
function box(){
var a = document.querySelectorAll(".name");
a[0].style.color="blue";
a[1].style.color="green";
}
</script>
</body>
</html>
Here is the output of this code :
Comments
Post a Comment
I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!