[Edit]

JavaScript - style HTML elements with custom attribute only

1 contributors

2 contributions

0 discussions

0 points

Created by:

Anisha-Kidd

652

In this article, we would like to show you how to style HTML elements containing custom attribute only using JavaScript.

Quick solution:

xxxxxxxxxx
 
var myElements = document.querySelectorAll('.class-name');
​
myElements.forEach((element) => {
  if(element.hasAttribute('data-attribute-name')){
    // do something with elements
  }
});

Practical example

Edit

In this example, we use hasAttribute() method to check if the elements with class1 also contain myAttribute, then we style only the ones that do have the attribute.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <div class="class1" data-attribute-name="value">element1</div>
  <div class="class1">element2</div>
  <div class="class1" data-attribute-name="value">element3</div>
  <script>
    // get elements by class
    var myElements = document.querySelectorAll('.class1');
​
    myElements.forEach((element) => {
      if(element.hasAttribute('data-attribute-name')){
        // do something with elements (e.g style them):
        element.style.backgroundColor = 'yellow';
      }
    });
  </script>
</body>
</html>

Auto running

Style elements with a specific attribute value

Edit

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <div class="class1" data-attribute-name="value1">element1</div>
  <div class="class1" data-attribute-name="value2">element2</div>
  <div class="class1">element3</div>
  <script>
    // get elements by class
    var myElements = document.querySelectorAll('.class1');
​
    myElements.forEach((element) => {
      if(element.getAttribute('data-attribute-name') == 'value1'){
        // do something with elements (e.g style them):
        element.style.backgroundColor = 'yellow';
      }
    });
  </script>
</body>
</html>