1. 問題引入
<head> <style> #div1{ width:150px; height:200px; position:absolute; left:-150px; background: green; } </style> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); alert(oDiv1.style.left); //獲取left屬性的值 } </script> </head> <body> <div id="div1"></div> </body>
上面代碼的意思是想要獲取得到id="div1"元素的left屬性值。但是當我們運行上面代碼的時候就會發現，彈窗彈出的內容確實什么都沒有。
我們明明在<style></style>標簽內定義了該元素的left屬性，為什么alert(oDiv.style.left);確實返回一個什么都沒有的彈窗呢？
其實，這個問題的原因是：oDiv1.style.left這樣的格式來獲取的left是非行間樣式的left。
2. 什么是非行間樣式？
非行間樣式就是指不是寫在標簽體內的style屬性的樣式。如上面的代碼中<style>....</style>內的定義的樣式都是非行間樣式。
3. 那什么是行間樣式？
行間樣式就是寫在標簽體內的樣式：如，<div style="left:100px">，在這里left樣式就是行間樣式。
4. 那我們該如何獲取行間樣式呢？
要獲取行間樣式我們可以這樣操作：
低版本ie瀏覽器下使用oDiv1.currentStyle.left;進行獲取非行間樣式。
其它瀏覽器下使用var style = window.getComputedStyle(oDiv1,null); //第二個參數直接傳入null就行，沒什么作用的。
alert(style.left); //便可以返回行間樣式的left屬性值
5. 整合在一起，兼容所有瀏覽器的代碼：
window.onload = function(){ var oDiv1 = document.getElementById('div1'); if(oDiv1.currentStyle){ alert(oDiv1.currentStyle.left); }else{ alert(getComputedStyle(oDiv1,null).left); } }