js怎麼清除css的屬性?
在工作上，時常需要應用Javascript來修改網頁元素的樣式。當中一種辦法是修改網頁元素的CSS類(Class)，這在過去的Javascript裡，人們一般是利用處理HTMLDom的classname特性來實作的。人們也能夠利用此方法清除css樣式。
JavaScript清除css屬性的方法：
應用document.getElementById("objid").className=""來清空樣式;
className屬性設定或傳回元素的class屬性。利用改變class屬性就可以更愛css樣式。
在個别浏覽器中(比如Chrome)，你給他賦什麼值，它就傳回什麼值。在IE中則比較難受，它會格式化輸出、會把屬性大寫、會修改屬性次序、會消除最後一個分号
示例：
1 <!doctype html><html>
2
3
4
5 <head>
6
7 <meta charset="utf-8">
8
9 <title>資訊管理</title>
10
11 <!--通知ie使用最新核心-->
12
13 <meta http-equiv="X-UA-Compatible" content="IE=edge">
14
15 <!--響應式，限制縮放-->
16
17 <meta name="viewport" content="width=device-width, maxinum-scale=1,user-scalable=no,initial-scale=1">
18
19 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
20
21 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
22
23 <style>body{ background:#eee;} #main{ max-width:640px; font-family:"微軟雅黑"; }
24
25 /*頭部*/
26
27 .tou{ background:#fff; margin-top:20px; padding-top:13px; padding-bottom:13px;}
28
29 /*頭部左邊*/
30
31 .tou .tou-left{ margin-left:15px;} .tou .tou-left a{}
32
33 .tou .tou-left img{ width:78px; height:78px;}
34
35 /*頭部右邊*/
36
37 .tou .tou-right{ position:relative; float:left; margin-left:20px;}
38
39 .tou .tou-right h3{ font-size:18px; margin-top:3px; margin-bottom:8px;}
40
41 .tou .tou-right p{ font-size:14px; color:#999; margin-bottom:5px;}
42
43 .tou .tou-right .self-depart{ margin-bottom:0px;}
44
45 /*采集和已采集連接配接*/
46
47 .self-nav{ margin-top:20px; background:#fff; ;}
48
49 .self-nav .col-xs-6{ padding-left:0; padding-right:0; margin-left:0; margin-right:0; }
50
51 .self-nav .btn{ padding-top:10px; padding-bottom:10px;}
52
53 /*采集清單*/
54
55 .self-menu{ margin-top:20px; background:#fff;border-top:1px solid #fff;
56
57 border-bottom:1px solid #fff; }
58
59 .self-menu .self-menu-cont li{ border-bottom:1px solid #eee;}
60
61 .self-menu .self-menu-cont li .self-danger{ background:#C00;}
62
63 /*底部技術支援*/
64
65 .self-footer{ margin-top:20px; background:#fff; padding-top:13px; padding-bottom:13px; }
66
67 .self-footer p{ margin-bottom:0; font-size:12px; color:#666; text-align:center;} </style>
68
69 </head>
70
71
72
73 <body>
74
75 <div id="main">
76
77 <!--頭部-->
78
79 <div>
80
81 <div>
82
83 <a href="./">
84
85 <img src="" /></a>
86
87 </div>
88
89 <div>
90
91 <h3>張三</h3>
92
93 <p>微信号：zhangsan</p>
94
95 <p>部門：安全部</p></div>
96
97 </div>
98
99 <!--banner-->
100
101 <div>
102
103 <div>
104
105 <a href="#tab1"
106
107 id="send" onclick="hiddenTag()">資訊清單</a></div>
108
109 <div>
110
111 <a href="#tab2" onclick="showTag()">
112
113 添加資訊</a></div>
114
115 </div>
116
117 <!--菜單清單-->
118
119 <div>
120
121 <ul id="tab1">
122
123 <li>
124
125 <a href="">資訊清單 <span>10</span></a>
126
127 </li>
128
129 <li>
130
131 <a href="">消息清單 <span>10</span></a>
132
133 </li>
134
135 <li>
136
137 <a href="">留言清單 <span>10</span></a>
138
139 </li>
140
141 <li>
142
143 <a href="">傳達清單 <span>10</span></a>
144
145 </li>
146
147 <li>
148
149 <a href="">通知清單 <span>10</span></a>
150
151 </li>
152
153 </ul>
154
155 <ul
156
157 id="tab2">
158
159 <li>
160
161 <a href="">添加資訊</a></li>
162
163 <li>
164
165 <a href="">添加消息</a></li>
166
167 <li>
168
169 <a href="">添加留言</a></li>
170
171 <li>
172
173 <a href="">添加傳達</a></li>
174
175 <li>
176
177 <a href="">添加通知</a></li>
178
179 </ul>
180
181 </div>
182
183 </div>
184
185 </body>
186
187 <script>function hiddenTag() { //通過JS添加樣式+移除樣式
188
189 document.getElementById('tab1').style.display = "block"; document.getElementById('tab2').style.display = "none";
190
191 } function showTag() { //通過JS添加樣式+移除樣式
192
193 document.getElementById('tab1').style.display = "none"; document.getElementById("tab2").removeAttribute("style");
194
195 }</script></html> 推薦閱讀：怎樣推廣網站，網站推廣的常用方法介紹