JS 控制CSS样式的两种有用的方法

1.用JS修改标签的 class 属性值： 

class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。 

JavaScript

<style type="text/css"> .txt { font-size: 30px; font-weight: bold; color: red; } </style> <div id="tt">欢迎光临！</div> <p><button onclick="setClass()">更改样式</button></p> <script type="text/javascript"> function setClass() { document.getElementById( "tt" ).className = "txt"; } </script> 

2.2.用JS修改标签的 style 属性值： 
style 属性也是在标签上引用样式表的方法之一，它的值是一个CSS样式表。DOM 对象也有 style 属性，不过这个属性本身也是一个对象，Style 对象的属性和 CSS 属性是一一对应的，当改变了 Style 对象的属性时，对应标签的 CSS 属性值也就改变了，所以这属于第二种修改方法。 
更改一个标签的 CSS 属性的代码是： 
document.getElementById( id ).style.属性名 = 值; 

JavaScript

function setColor() { document.getElementById( "t2" ).style.color = "red"; } function setbgColor() { document.getElementById( "t2" ).style.backgroundColor = "blue"; } function setBd() { document.getElementById( "t2" ).style.border = "3px solid #FA8072"; }