How to set the universal CSS selector with JavaScript?


Tags: javascript,css,css-selectors

Problem :

I often use the CSS universal selector to reset the dimensions in my HTML document:

* {
    border: 0;
    margin: 0; 
    padding: 0; 
}

Can this be done with JavaScript too?

For normal HTML elements there is the style property. But how to speak to the universal selector?



Solution :

getElementsByTagName("*") will return all elements from DOM. Then you may set styles for each element in the collection:

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

    CSS Howto..

    looking for a good explanation on how html gets rendered and how css effects it [closed]

    Big Cartel - Slideshow Questions

    How to make a vertical bar that follows its user in a specific area?

    How to Update Visual Studio's “Cascading Style Sheet Version for Validation”

    How to use css to set svg hover color?

    Why is the icon shown in some browsers while other it is not

    how to use css to style a descendant (not a direct child) of an element?

    CSS parser/abstracter? How to convert stylesheet into object

    How to refer to a child class CSS

    How to make the visible part of png image with transparent background as a link?

    how to code different type of border in css?

    How to pass a local file name to css-validator.jar?

    How to set padding-left to my custom textbox in css?

    How to fill the anchor element's height to 100% in html?

    how to give conditional comments in firefox for a single css style statement

    How can I make height: “100%” work cross browser in CSS?

    Blueprint CSS - Link showing both URL and text

    How can I control button margins using CSS (IE8 compatible)

    How do I apply CSS to the table generated into another window?

    How to make a css keyframe step animation responsive?

    How to get an image to resize on scroll?

    How to make image override parent width and stretch to browser width?

    how to make a DIV responsive css html

    how to center background image in window resize

    Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

    How can I make a designer's static web page run in rails 4

    Angular show / hide with animation

    How to Format text boxes with Css

    How should I use `position` and other properties correctly to position my web page?

    How do align images vertically centers with CSS and HTML?