JavaScript修改CSS样式的两种核心方法

JavaScript修改CSS样式的两种核心方法

若需通过原生JavaScript修改CSS属性，主要涉及两种实现路径。

通过className属性切换样式类

class属性是HTML标签引用样式表的一种方式，其值对应样式表中的选择器。当修改class属性的值时，标签所关联的样式表规则随之改变，这构成了第一种修改样式的方法。

修改标签class属性的具体代码如下：

document.getElementById( id ).className = 字符串;

其中，document.getElementById( id )用于获取目标标签对应的DOM对象，也可使用其他选择器方法替代。className是DOM对象的一个属性，直接对应HTML标签的class属性。字符串参数代表class的新值，该值必须是CSS中已定义的选择符名称。

此方法可用于将标签的CSS样式切换至另一个类，或为原本未应用CSS样式的标签指定特定的样式规则。

具体应用示例如下：

 
<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="javascript">
function setClass()
{ 
document.getElementById( "tt" ).className = "txt";
} 
</script>

通过style对象直接修改属性

style属性同样是标签引用样式表的方式之一，其值直接对应CSS样式表。DOM对象同样拥有style属性，但该属性本身是一个Style对象。Style对象的属性与CSS属性一一对应，修改Style对象的属性即改变了标签对应的CSS属性值，这构成了第二种修改样式的方法。

修改标签CSS属性的代码如下：

document.getElementById( id ).style.属性名 = 值;

其中，document.getElementById( id )用于获取目标标签对应的DOM对象，也可使用其他方法获取。style是DOM对象的一个属性，其本身为对象类型。属性名指Style对象的属性名，需与目标CSS属性相对应。

注意：此方法仅修改单一的CSS属性，不会影响标签上其他CSS属性的现有值。

具体应用示例如下：

 
<div id="t2">欢迎光临！</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">颜色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">边框</button>
</p>
<script type="javascript">
function setSize()
{ 
document.getElementById( "t2" ).style.fontSize = "30px";
} 
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";
} 
</script>

常用方法汇总：

document.getElementById("xx").style.xxx中涉及的所有属性有哪些？