Javascript DOM HTML Document getElementsByClassName() Method get by two class names

Introduction

Get all elements with both the "example" and "color" classes: 

var x = document.getElementsByClassName("example color");

Click the button to change the background color of the first div element with the classes "example" and "color".

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {//from   w  w w .java2 s  . c om
  border: 1px solid black;
  margin: 5px;
}
</style>
</head>
<body>

<div class="example">
  <p>P element in first div with class="example". Div's index is 0.</p>
</div>

<div class="example color">
  <p>P element in first div with class="example color". Div's index is 0.</p>
</div>

<div class="example color">
  <p>P element in second div with class="example color". Div's index is 1.</p>
</div>
<button onclick="myFunction()">Test</button>
<script>
function myFunction() {
  var x = document.getElementsByClassName("example color");
  x[0].style.backgroundColor = "red";
}
</script>

</body>
</html>



PreviousNext

Related