码迷,mamicode.com
首页 > 编程语言 > 详细

javascript操作class和style样式

时间:2016-02-13 06:45:20      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .fontSize22
 8 {
 9     font-size:22px;
10 }
11 .fontWeight
12 {
13     font-weight:bold;
14 }
15 </style>
16 </head>
17 
18 <body>
19 <div id="div1" class="fontSize22 fontWeight"  style="color:red">div实例文本</div>
20 <button onclick="changeStyle()">changeStyle()</button>
21 <script>
22 function changeStyle()
23 {
24     var div1 = document.getElementById("div1");
25     //div1.className = "fontSize22";
26     //div1.className += " fontWeight";
27     //删除单个class=""样式
28     //div1.className = div1.className.replace(/fontSize22/,"");
29     //删除所有class=""样式
30     //div1.removeAttribute("class");
31     //删除style=""中的单个样式
32     div1.style.cssText = div1.style.cssText.replace(/red/,"blue");
33     //删除style=""中的所有样式
34     //div1.style.cssText = "";
35 }
36 </script>
37 </body>
38 </html>

 

javascript操作class和style样式

标签:

原文地址:http://www.cnblogs.com/cag2050/p/5187426.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!