JavaScript learning--js Get inline and non-inline styles

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