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!
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:
- Using dynamic styling information - Web API Interfaces | MDN
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
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';
}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.
If you want to use complex selector like th[scope=col], use jQuery
<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>
加载中,请稍侯......
精彩评论