Advertisements
How to get element by class name in JavaScript
Topic: JavaScript / jQueryPrev|Next
Answer: Use the getElementsByClassName() method
You 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:
Example
Try this code »<!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>Related FAQ
Here are some more FAQ related to this topic:
- How to check if an element exists in jQuery
- How to select an element with multiple classes with jQuery
- How to select all visible or hidden elements in a page using jQuery
Advertisements
