1.获得样式
通过行内获得样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获得计算后样式</title> <style type="text/css"> #wrap{ width: 200px; height: 200px; background:#ccc; position: absolute; left: 50px; } </style> </head> <body> <div id="wrap"></div> </body> </html> <script type="text/javascript"> //无论什么情况下从页面或者标签中获得的内容,都是字符串类型 //获得当前标签的当前left和top值 var wrap = document.querySelector("#wrap"); //通过行间样式获得 var left = wrap.style.left; var realLeft = Number(left.replace("px","")); console.log(typeof realLeft); console.log(realLeft); </script>
之所以left属性值为零,因为是通过行内样式获得,故而不能获得id样式,所以要在div标签内添加行内样式属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获得计算后样式</title> <style type="text/css"> #wrap{ width: 200px; height: 200px; background:#ccc; position: absolute; } </style> </head> <body> <div id="wrap" style="left: 100px"></div> </body> </html> <script type="text/javascript"> //无论什么情况下从页面或者标签中获得的内容,都是字符串类型 //获得当前标签的当前left和top值 var wrap = document.querySelector("#wrap"); //通过行间样式获得 var left = wrap.style.left; var realLeft = Number(left.replace("px","")); console.log(typeof realLeft); console.log(realLeft); </script>
2. 获得计算后的内联样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获得计算后样式</title> <style type="text/css"> #wrap{ width: 200px; height: 200px; background:#ccc; position: absolute; /*left: 50px;*/ } </style> </head> <body> <div id="wrap" style="left: 100px"></div> </body> </html> <script type="text/javascript"> //获得计算后样式 //既可以获得行间样式,也可以获得内联样式 var style = getComputedStyle(wrap); var left = style.left; console.log(left); </script>
获得计算后的行内样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获得计算后样式</title> <style type="text/css"> #wrap{ width: 200px; height: 200px; background:#ccc; position: absolute; left: 50px; } </style> </head> <body> <div id="wrap"></div> </body> </html> <script type="text/javascript"> //获得计算后样式 //既可以获得行间样式,也可以获得内联样式 var style = getComputedStyle(wrap); var left = style.left; console.log(left); </script>
3.获得计算后的样式方法二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获得计算后样式</title> </head> <body> <div id="wrap" style="left: 50px"></div> </body> </html> <script type="text/javascript"> var wrap = document.querySelector("#wrap"); //obj就是标签名,name是属性名 function getCss(obj,name){ if(obj.objcurrentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj)[name]; } } var value = getCss(wrap,"left"); console.log(value); </script>
4.属性名为变量名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性为变量名</title> </head> <body> <div id="wrap"></div> </body> <script type="text/javascript"> var wrap = document.querySelector("#wrap"); wrap.sex = "男"; wrap.blood = 100; var name = "hello"; //中括号中原为属性名,这里是变量 wrap[name] = "名字"; console.log(wrap); </script> </html> <script type="text/javascript"> </script>
打印结果应该是wrap.name = "名字"
5.获得样式总结
1.获得行间样式:标签.style.样式名
2.获得计算后样式:getComputedStyle(标签).样式名-->针对现代浏览器
标签.currentStyle.样式名-->针对IE浏览器
3.属性名如果是变量,name我们需要通过:标签[变量]
6.样式获得
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式获得</title> <style type="text/css"> #wrap{ width: 100px; height: 100px; border: 1px solid red; position: absolute; left: 300px; top: 400px; } </style> </head> <body> <div id="wrap"></div> </body> </html> <script type="text/javascript"> var wrap = document.querySelector("#wrap"); //1.获得left,直接获得数字,获得绝对定位的left var left = wrap.offsetLeft; console.log(left); //2.获得top值(注意,变量名不能为top) var myTop = wrap,offsetTop; console.log(myTop); //3.offsetWidth var width = wrap.offsetWidth; console.log(width); //4.获得高度 var height = wrap.offsetHeight; console.log(height); </script>
总结:
offset开头的只有left top width height
得到的结果只能是数字
不能赋值
注意:如果标签为display:none,那么就不能获得任何值(值为0),只能通过getCss函数获得