javascript動態(tài)設(shè)置樣式style實(shí)例分析

更新時間：2015年05月13日 14:58:13 作者：永遠(yuǎn)愛好寫程序

這篇文章主要介紹了javascript動態(tài)設(shè)置樣式style的方法,實(shí)例分析了javascript操作style樣式的易錯點(diǎn)和相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript動態(tài)設(shè)置樣式style的方法。分享給大家供大家參考。具體分析如下：

動態(tài)修改style

1.易錯:修改元素的樣式不是設(shè)置class屬性，而是className屬性.
2.易錯:單獨(dú)修改樣式的屬性使用"style.屬性名".注意在css中屬性名在javascript中

操作的時候?qū)傩悦赡懿灰粯?，主要集中在那些屬性名中含?的屬性，因?yàn)?/p>

javascript中-是不能做屬性，類名的。所以在CSS中背景色是background-clolor,而javascript中則是style.background;元素樣式名是class，在javascript中是className屬性;font-size->style.fontSize;margin-top->style.marginTop

3.單獨(dú)修改控件的樣式<input type="button" value="AAA" onclick="this.style.color='red'" />

1.舉例1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>動態(tài)修改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. 示例:動態(tài)修改style(模擬開燈，關(guān)燈)

<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 = "關(guān)燈"; 
 }
 }
 </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>動態(tài)設(shè)置style練習(xí)(修改文本框背景色)</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") {
  //設(shè)置txtOnBlur函數(shù)為input元素的onblur事件的響應(yīng)函數(shù)
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的響應(yīng)函數(shù)，而不是被響應(yīng)函數(shù)調(diào)用
 的函數(shù)，所有可以用this來取的發(fā)生事件控件的對象
 */
 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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: