[Js高手之路第一部]JavaScript上百例实战新版_20 读取样式与className和屏蔽空的锚
Posted denggelin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Js高手之路第一部]JavaScript上百例实战新版_20 读取样式与className和屏蔽空的锚相关的知识，希望对你有一定的参考价值。
<input type="button" value="恢复样式" onclick="resetStyle();" />
<input type="button" value="修改样式" onclick="setStyle();" />
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div { 8 width: 200px; 9 height: 200px; 10 background: red; 11 } 12 .active { 13 width: 400px; 14 height: 400px; 15 background: blue; 16 } 17 </style> 18 <script> 19 function setStyle() { 20 var oBox=document.getElementById("box"); 21 oBox.className="active"; 22 } 23 function resetStyle() { 24 var oBox=document.getElementById("box"); 25 oBox.className=""; 26 } 27 </script> 28 </head> 29 <body> 30 <input type="button" value="修改样式" onclick="setStyle();" /> 31 <input type="button" value="恢复样式" onclick="resetStyle();" /> 32 <div id="box"></div> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div { 8 width: 200px; 9 height: 200px; 10 background: red; 11 } 12 </style> 13 <script> 14 function getStyle() { 15 var oBox=document.getElementById("box"); 16 console.log(css(oBox,‘height‘)); 17 } 18 19 function css(obj,attr) { 20 //兼容ie8和chrome/ff 21 if (obj.currentStyle) { 22 return obj.currentStyle[attr]; 23 } else { 24 return getComputedStyle(obj,false)[attr]; 25 } 26 } 27 </script> 28 </head> 29 <body> 30 <input type="button" value="读取" onclick="getStyle();"> 31 <div id="box"></div> 32 </body> 33 </html>
以上是关于[Js高手之路第一部]JavaScript上百例实战新版_20 读取样式与className和屏蔽空的锚的主要内容，如果未能解决你的问题，请参考以下文章
[Js高手之路第一部]JavaScript上百例实战新版_1 js代码三种书写方式
[Js高手之路第一部]JavaScript上百例实战新版_2 javascript变量命名&使用规则
[Js高手之路第一部]JavaScript上百例实战新版_8 javascript二重循环,break与continue语句
[Js高手之路第一部]JavaScript上百例实战新版_20 读取样式与className和屏蔽空的锚