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!
-
Thanks for all your replies. I voted all of them because each one has taught something that I didn't know. I accepted the one that for my problem is the simplest to follow.tic– tic2010年03月14日 19:05:58 +00:00Commented Mar 14, 2010 at 19:05
6 Answers 6
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:
1 Comment
cssText property of each CSSRule object in each cssRules collection in each of the CSSStyleSheet objects or you'd have to rely on the relevant rule being in a specific order in the (nested) collections.You can easily access and modify CSS propery of any DOM by setting properties of the style object. i.e. to change the background color of a DOM element with id of #yourid you do this
document.getElementById('yourid').style.backgroundColor = "#f3f3f3";
note that CSS properties that are made up of two names seperated by an hyphen, i.e background-color, font-size are turned into camelCase notation, i.e backgroundColor and fontSize while single worded properties retain their respective names
1 Comment
document.getElementsByClassName('myclass')[NUMBER].style['background-color'] = '#ccc';Example:
document.getElementsByClassName('myclass')[0].style['background-color'] = '#ccc';
document.getElementsByClassName('myclass')[1].style['background-color'] = '#ccc';
If you want change all td.myclass
var myObj = document.getElementsByClassName('myclass');
for(var i=0; i<myObj.length; i++){
myObj[i].style['background-color'] = '#ccc';
}1 Comment
myObj[i].style.backgroundColor. But a dot followed by a bracket isn’t valid JavaScript.You can use the id attribute for as many elements as you like, but they must be unique.
You can also use the class attribute, but to find the specific element you want will be bit tougher.
Then, using JavaScript, you can use the document.getElementById function to retrieve the DOMElement object to set CSS properties on. For classes, you will need to first get all the elements with the specified tag name by calling document.getElementsByTagName, then iterating over the resulting array and checking if each element has the provided class name, and if it does, then adding to an array, which after the loop gets returned.
Comments
<html>
<head>
<style type="text/css">
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:Segoe UI, sans-serif;
}
.header, .container, .footer {
min-height:100px;
}
.header {
background-color:#757575;
}
.container {
background-color:#cccccc;
}
.footer {
background-color:#757575;
}
.header, .footer, .column {
text-align:center;
}
.column {
float:left;
min-width:300px;
border-left:1px solid blue;
border-right:1px solid blue;
margin-left:10px;
}
</style>
<script type="text/javascript">
function headerContentFooter(headerRatio, footerRatio) {
totalHeight = document.height;
headerHeight = 0;
containerHeight = 0;
footerHeight = 0;
if(headerRatio < 0.5 && footerRatio < 0.5) {
headerHeight = totalHeight * headerRatio;
footerHeight = totalHeight * footerRatio;
containerHeight = totalHeight - (headerHeight + footerHeight);
document.getElementsByClassName("header")[0].style.height = "" + headerHeight + "px";
document.getElementsByClassName("container")[0].style.height = "" + containerHeight + "px";
document.getElementsByClassName("footer")[0].style.height = "" + footerHeight + "px";
document.getElementsByClassName("header")[0].style.minHeight = "" + headerHeight + "px";
document.getElementsByClassName("container")[0].style.minHeight = "" + containerHeight + "px";
document.getElementsByClassName("footer")[0].style.minHeight = "" + footerHeight + "px";
document.getElementsByClassName("header")[0].style.maxHeight = "" + headerHeight + "px";
document.getElementsByClassName("container")[0].style.maxHeight = "" + containerHeight + "px";
document.getElementsByClassName("footer")[0].style.maxHeight = "" + footerHeight + "px";
}
}
</script>
</head>
<body>
<div class="header">HEADER</div>
<div class="container">
<div class="column">LEFT</div><div class="column">CENTER</div><div class="column">RIGHT</div>
</div>
<div class="footer">FOOTER</div>
<script type="text/javascript">
headerContentFooter(0.05, 0.05);
</script>
</body>
</html>
Comments
If you want to use complex selector like th[scope=col], use jQuery