Using querySelectorAll to change the style property of multiple elements

by

I would select them with a querySelectorAll and loop over them.

function changeOpacity(className) {
    var elems = document.querySelectorAll(className);
    var index = 0, length = elems.length;
    for ( ; index < length; index++) {
        elems[index].style.transition = "opacity 0.5s linear 0s";
        elems[index].style.opacity = 0.5;
    }
}

Edit: As a comment said you might be better off putting styling values in a CSS class if they are not dynamic and use:

elems[index].classList.add('someclass');

More Related Contents:

  1. How to have html popup appear over main html page?
  2. Write tags in HTML and print
  3. Change from (+) symbol to (-) after click (function(){
  4. How to disable HTML links
  5. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  6. How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
  7. Can you style an html radio button to look like a checkbox?
  8. Animate element to auto height with jQuery
  9. How to style “input file” with CSS3 / Javascript? [duplicate]
  10. Changing element style attribute dynamically using JavaScript
  11. How do I clear the content of a div using JavaScript? [closed]
  12. How to get browser width using JavaScript code?
  13. How to get nth-child selector to skip hidden divs [duplicate]
  14. How to make div fixed after you scroll to that div?
  15. Force browser to trigger reflow while changing CSS
  16. How to auto-scroll to end of div when data is added? [duplicate]
  17. How to reorder divs using flex box?
  18. how to change the background image of div using javascript?
  19. How to keep the menu state on page reload
  20. HTML Alignment Issue in one machine only (both IE8)
  21. option.style.display = “none” not working in safari [duplicate]
  22. How to scroll table’s “tbody” independent of “thead”?
  23. Check if element is between 30% and 60% of the viewport
  24. How to vertically align all text in CSS?
  25. How do I detect the inherited background-color of an element using jQuery/JS?
  26. Rotate div text after clicking on button using jquery and css
  27. How to Bootstrap navbar static to fixed on scroll?
  28. How to use pagination on HTML tables?
  29. How to access css properties in javascript when applied via external CSS file?
  30. How can I reorder elements with JavaScript?

Leave a Comment