getElementsByClassName()
methodYou can use the getElementsByClassName()
to get or select the elements by their class attribute value in JavaScript. This method returns an array of matched elements, because more than one element on the page can have the same class. Let's check out an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Element by Class in JavaScript</title>
<style>
.box{
height: 50px;
background: #ddd;
margin: 20px;
}
.box.bordered{
border: 5px solid #333;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>
<script>
var boxes = document.getElementsByClassName("box");
// Select first box and style it with red background
boxes[0].style.background = "red";
/* Select elements having both "box" and "bordered" class
and style them with yellow background */
var borderedBoxes = document.getElementsByClassName("box bordered");
for(var i = 0; i < borderedBoxes.length; i++){
borderedBoxes[i].style.background = "yellow";
}
// Select last element and style it with green background
boxes[boxes.length - 1].style.background = "green";
</script>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com
Laravel 7 Send Mail Using Markdown Example
Today, markdown laravel 7 mail is our ma...How to get drop-down Select Values in React
React-Select is profoundly easy to...How to Check Whether a String Contains a Substring in JavaScript
Use the indexOf() Method Th...How to Parse JSON in JavaScript
Use the JSON.parse() Method You...What is new in Laravel 8?
Hello artisan, I have some good news...