Menu
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!
960
With JavaScript, we are able to set CSS styles for one or multiple elements in the DOM, modify them, remove them or even change the whole stylesheet for all your page.
The easiest way of changing a CSS class in JavaScript is by using the className method. Using this method, you can replace any existing classes already present on the HTML element with some other classes. You can specify all the new classes that you want to add as a string with space separation.
The stylesheet object is available through JavaScript, and allows you to access information about a style sheet referenced from the current web page, such as if it is disabled, its location, and the list of CSS rules it contains.
It is possible to change the CSS property of an element by using a simple JavaScript API, but we try to complete this challenge using jQuery css() method.
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:
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
