使用 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>