JavaScript动态设置CSS样式的方法与示例

JavaScript动态设置CSS样式的方法与示例

本文通过具体实例解析JavaScript动态设置元素样式的方法，供读者参考学习。

动态修改CSS样式

动态修改CSS样式

首先需注意两个常见误区：第一，修改元素样式时应操作className属性，而非class属性；第二，单独修改样式属性时，需使用style对象后的属性名，且CSS中的属性名在JavaScript中可能存在差异。

这种差异主要体现在包含连字符的属性上，因为JavaScript中连字符不能作为属性名或类名使用。

例如，CSS中的background-color在JavaScript中需写作style.backgroundColor（注：原文笔误为background-clolor，此处按标准修正说明逻辑，但保留原意指代背景色），而CSS的class属性在JavaScript中对应className；font-size对应style.fontSize，margin-top对应style.marginTop。

可以直接在HTML元素的事件处理中单独修改控件样式，例如：<input type="button" value="AAA" onclick="this.style.color='red'" />

示例1：基础样式切换

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态修改style</title>
 <style type="text/css">
 .day
 {
 background-color:Green;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function dayclick() {
 var divMain = document.getElementById("divMain");
 //注意这里使用的是className而不是class
 divMain.className = "day";
 }
 function nightclick() {
 var divMain = document.getElementById("divMain");
 divMain.className = "night";
 }
 </script>
</head>
<body>
 <div id="divMain" class="day">
 <font color="red">中华人名共和国</font>
 </div>
 <input type="button" value="白天" onclick="dayclick()" />
 <input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>

示例2：动态修改style（模拟开灯与关灯效果）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
 .day
 {
 background-color:White;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function switchLight() {
 var btnSwitch = document.getElementById("btnSwitch");
 if (document.body.className == "day") {
 document.body.className = "night";
 btnSwitch.value = "开灯";
 }
 else {
 document.body.className = "day";
 btnSwitch.value = "关灯"; 
 }
 }
 </script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/>
</body>
</html>

示例3：文本框失去焦点时的样式处理

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态设置style练习(修改文本框背景色)</title>
 <script type="text/javascript">
 function IniEvents() {
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].type == "text") {
  //设置txtOnBlur函数为input元素的onblur事件的响应函数
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的响应函数，而不是被响应函数调用
 的函数，所有可以用this来取的发生事件控件的对象
 */
 if (this.value.length <= 0) {
 this.style.background = "red";
 }
 else {
 this.style.background = "white";
 }
 }
 </script>
</head>
<body onload="IniEvents()">
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
</body>
</html>

希望本文所述内容对大家的JavaScript程序设计有所帮助。