本文實例講述了javascript動態設置樣式style的方法。分享給大家供大家參考。具體分析如下：
動態修改style
1.易錯:修改元素的樣式不是設置class屬性，而是className屬性.
2.易錯:單獨修改樣式的屬性使用"style.屬性名".注意在css中屬性名在javascript中
操作的時候屬性名可能不一樣，主要集中在那些屬性名中含有-的屬性，因為
javascript中-是不能做屬性，類名的。所以在CSS中背景色是background-clolor,而javascript中則是style.background;元素樣式名是class，在javascript中是className屬性;font-size->style.fontSize;margin-top->style.marginTop
3.單獨修改控件的樣式<input type="button" value="AAA" onclick="this.style.color='red'" />
1.舉例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>
學習交流
- HTC M8怎么換主題 M8換主題方法12-23
- 錘子手機如何開啟單手撥號面板12-23
- OPPO R7拍照音如何關閉12-23
- LG G3如何開啟來電翻轉靜音12-23
- 兩種方式登錄FTP10-30
- 查看一個頂級域名下所有的二級域名10-30
- 用HOSTS文件屏蔽網站 建立網站映射的方法10-30
- 域名狀態及其意義總結10-30
- 二級域名原理以及程序，申請即可開通10-28
熱門圖片
猜你喜歡的新聞
新聞熱點
2024-04-27 13:35:46
2024-04-27 13:33:47
2024-04-24 22:53:44
2024-04-23 19:32:50
2024-04-23 19:25:50
2024-04-23 19:13:19
疑難解答
圖片精選