5

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Benny Code
  • 51,456
  • 28
  • 233
  • 198

4 Answers4

7

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 = ...
}
VisioN
  • 143,310
  • 32
  • 282
  • 281
6

You don't need to iterate all the elements. You can demand this operation to the CSS engine of your browser. Something like that:

;(function(exports) {
  var style = document.querySelector("head")
                      .appendChild(document.createElement("style"));

  var styleSheet = document.styleSheets[document.styleSheets.length - 1];
  styleSheet.insertRule("* {}", 0);

  exports.universal = styleSheet.cssRules[0];
}(window));

From now, you have a window.universal object that you can use to style all the elements. For instance:

window.universal.style.border = "1px solid red";

Of course you don't need to create at runtime the <style> tag. You can always have that in plain HTML too.

You can test it running this snippet:

;(function(exports) {
  var style = document.querySelector("head")
                      .appendChild(document.createElement("style"));

  var styleSheet = document.styleSheets[document.styleSheets.length - 1];
  styleSheet.insertRule("* {}", 0);

  exports.universal = styleSheet.cssRules[0];
}(window));

console.log("universal" in window); // true

window.universal.style.border = "1px solid red";
<div>
  Hello
  <span>World</span>
</div>
ZER0
  • 24,846
  • 5
  • 51
  • 54
  • `Uncaught TypeError: window.universal is undefined` showing in Firefox 86.0.1 when using `window.universal.style.border = "1px solid red";` – Ratul Hasan Mar 15 '21 at 05:51
  • Did you run the script that creates the `window.universal` object? I ran in Firefox 86 and 88 and it's still working (although it's a very old code and I wouldn't do something like that nowadays). If you try to access to `window.universal` without the script above it won't work. – ZER0 Mar 16 '21 at 19:02
  • well, i added the code inside ` – Ratul Hasan Mar 16 '21 at 21:34
  • 1
    I added a snippet in the original answer so you can test it. I don't know the details to your code so I cannot debug it. But it looks like when you try to access `window.universal` you don't have execute the snippet to create it yet. – ZER0 Mar 30 '21 at 17:36
  • thanks a lot, now it works, I probably missed the function workarounds it the previous code – Ratul Hasan Mar 31 '21 at 07:00
2

In raw javascript you can do this: 

document.getElementsByTagName('*')

but I wouldn't recommend adding css to all elements using js.

Jeffpowrs
  • 4,430
  • 4
  • 30
  • 49
0

Thanks VisioN for the solution! I just remembered that you can do the same with the new JavaScript Query Selector API:

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var element = allElements[i];        
  element.style.border = '0px';
  element.style.margin = '0px';
  element.style.padding = '0px';
}
Benny Code
  • 51,456
  • 28
  • 233
  • 198
  • Definitely you can use `querySelectorAll`, however you have to consider possible compatibility problems. – VisioN Feb 09 '13 at 20:29