How can I change the style of the document via JavaScript?

Question

That would go like this * {margin:0; padding:0;} in CSS.

score 7 · Accepted Answer · answered Feb 06 '10 at 10:40

7

To get the (first) stylesheet object use

document.styleSheets[0]

To access the (first) rule in the stylesheet use on of:

document.styleSheets[0].cssRules[0] // firefox
document.styleSheets[0].rules[0]    // IE

You can add rules with

insertRule(rule, index)                 // firefox
addRule(selector, declaration, [index]) // IE

Thus, to do what you describe in firefox:

document.styleSheets[0].insertRule("*{margin:0; padding:0;}", 0)

And to do it in IE:

document.styleSheets[0].addRule("*", "margin:0; padding:0;", 0)

answered Feb 06 '10 at 10:40

VoidPointer

1

see http://stackoverflow.com/questions/714655/how-can-i-set-a-css-hover-on-a-dom-created-element-in-javascript/714717#714717 and http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript/524721#524721 for two different approaches on dynamically creating the stylesheet if you don't want to append to an existing one – Christoph Feb 06 '10 at 14:30

score -1 · Answer 2 · answered Feb 06 '10 at 10:35

-1

If you'd like to change the padding and margin for the body element:

document.body.setAttribute('padding', '0');
document.body.setAttribute('margin', '0');

answered Feb 06 '10 at 10:35

Leventix

This would only set the styles on the body, the question is to set the styles on everything - * – meouw Feb 06 '10 at 10:37
Actually I want to change the cursor type for the whole document (not only within the body). – Frank Furd Feb 06 '10 at 10:39

2 Answers2