天天看點

js怎麼移除css屬性

  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>      

推薦閱讀:怎樣推廣網站,網站推廣的常用方法介紹