javasc之动画
?
?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,直接獲得數字,獲得絕對定位的leftvar left = wrap.offsetLeft;console.log(left);//2.獲得top值(注意,變量名不能為top)var myTop = wrap,offsetTop;console.log(myTop);//3.offsetWidthvar width = wrap.offsetWidth;console.log(width);//4.獲得高度var height = wrap.offsetHeight;console.log(height); </script>總結:
offset開頭的只有left top width height
得到的結果只能是數字
不能賦值
注意:如果標簽為display:none,那么就不能獲得任何值(值為0),只能通過getCss函數獲得
?
?
轉載于:https://www.cnblogs.com/zjm1999/p/10842134.html
總結
- 上一篇： react-draft-wysiwyg富
- 下一篇： git 码云 使用记录