Home/ Questions/Q 666745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T23:51:08+00:00

I need a function to change the appearance of some elements in my HTML

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    • 0