Search code examples
javascriptcssstylesheet

Changing CSS properties via JavaScript

I need a function to change the appearance of some elements in my HTML page "on the fly", but I am not able to do it.

The problem is that I cannot use a command like

document.write ('<style type="text/css">body {background-color: #cccccc;}</style>');

because I need to make the changes effective when the page is already loaded, using a link like

<a onmouseclick="Clicker(1)" href="#">clic</a>

and I cannot use a command like

document.body.style.background = '#cccccc';

because I do not know if it can be applied to other not so easy cases, because I need to change the appearance of elements such as td.myclass or sibling elements such as th[scope=col]+th[scope=col]+th[scope=col].

How can I do it? Thanks!

Solution

  • The stylesheets can be manipulated directly in JS with the document.styleSheets list.

    Example:

    <html>
<head>
<title>Modifying a stylesheet rule with CSSOM</title>
<style type="text/css">
body {
 background-color: red;
}
</style>
<script type="text/javascript">
var stylesheet = document.styleSheets[1];
stylesheet.cssRules[0].style.backgroundColor="blue";
</script>
<body>
The stylesheet declaration for the body's background color is modified via JavaScript.
</body>
</html>

    The example is by Mozilla Contributors and copied from: