使用 style 属性可以设置行内的 CSS 样式,而通过 id 和 class 调用是最常用的方法。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); box.id='pox'; //交换id之后,就会加载那个id的样式,但是这么做会引发各种怪异的现象 把 ID 改变会带来灾难性的问题 } </script> <style type="text/css"> #box{ font-size:20px; color:red; background:#ccc; } #pox{ font-size:30px; color:blue; background:orange; } </style> </head> <body> <div id="box">测试Div</div> </body>
不建议通过变换id来改变CSS样式,可以通过class来改变
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); box.className='bbb'; } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>
在添加 className 的时候,我们想给一个元素添加多个 class 是没有办法的,后面一个必将覆盖掉前面一个,所以必须来写个函数:
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); addClass(box,'bbb'); addClass(box,'ccc'); //判断是否存在这个 class function hasClass(element, className) { return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); } //添加一个 class,如果不存在的话 function addClass(element, className) { if (!hasClass(element, className)) { element.className += " "+className; } } //删除一个 class,如果存在的话 function removeClass(element, className) { if (hasClass(element, className)) { element.className = element.className.replace( new RegExp('(\\s|^)'+className+'(\\s|$)'),' '); } } } </script> <style type="text/css"> .aaa{ font-size:20px; color:red; background:#ccc; } .bbb{ font-size:30px; color:blue; background:orange; } .ccc{ float:right; } </style> </head> <body> <div id="box" class="aaa">测试Div</div> </body>