1. Problem Introduction
#div1 { width:150px; height:200px; Position:absolute; Left:-150px; Background:green; } </style><script> function() { var oDiv1 = document.getElementById (' Div1 '); // gets the value of the Left property }</script>
The above code means that you want to get the left property value of the id= "Div1" element. But when we run the code above, we will find that the popup content of the pop-up window does not have anything.
We clearly defined the left property of the element in the <style></style> tag, why alert (oDiv.style.left); Does it return a pop-up window with nothing?
In fact, the cause of this problem is: ODiv1.style.left such a format to get left is a non-inline style left.
2. What is a non-inline style?
The non-inline style refers to the style of the style property that is not written in the label body. The styles defined in <style>....</style> in the code above are non-inline styles.
3. What is the inline style?
The inline style is the style written in the label body: for example, <div style= "left:100px", where the left style is the inline style.
4. How do we get the inline style?
To get the inline style we can do this:
Use ODiv1.currentStyle.left under the low version of IE, to get non-inline styles.
Use var style = window.getComputedStyle (odiv1,null) under other browsers; The second parameter passes directly to NULL, which doesn't work.
alert (style.left); You can return the left property value of the inline style
5. Integrated, compatible with all browser code:
function () { var oDiv1 = document.getElementById (' div1 '); if (odiv1.currentstyle) { alert (oDiv1.currentStyle.left); } Else { alert (getComputedStyle (ODIV1,null). left); } }
JavaScript learning--js Get inline and non-inline styles