Before reading this article, please take a look at the first article JavaScript drag-and-drop series article 1 offsetparent attribute, because gradual is a good habit, worth advocating.
OK, let's see what we have today.
Let's first take a look at the Element.offsetleft attribute.
Supported browsers: Internet Explorer 4.0+,mozilla 1.0+,netscape 6.0+,opera 7.0+,safari 1.0+
Definition: Returns a pixel value that represents the offset of the left edge of the current element to the right of the object returned by its Offsetparent property.
Syntactic:
Leftdis = Element.offsetleft
There is a bug in the implementation of the Offsetleft property in Internet Explorer, regardless of the value of the current element's offsetparent attribute, it always computes the offsetleft as a reference to the BODY element. Luckily, this bug has been fixed in intern Explorer 8 Beta 1. It is still necessary to note that IE will calculate the offsetleft from the left-border of the BODY element, while the other browsers will begin to compute from the left-margin.
Test Code 1:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD">
<Html>
<Head>
<MetaHttp-equiv= "Content-type"Content= "text/html; Charset=utf-8 " />
<Title>Untitled Document</Title>
<StyleType= "Text/css">
Body{
Border:1px solid Red;
Margin-left:0px;
}
#parent{
Position:Relative;
Left:25px;
Top:0px;
Border:1px solid Black;
}
</Style>
<ScriptType= "Text/javascript"Language= "JavaScript">
functionOffset_init () {
VarPelement=document.getElementById ("Sonobj");
Parentobj=Pelement.offsetparent;
VarIoffsetleft=Pelement.offsetleft;
alert (parentobj.tagname);
alert (ioffsetleft);
}
</Script>
</Head>
<BodyOnLoad= "Offset_init ()">
<DivId= "Parent">Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
< span id = "sonobj" test offsetparent Properties </ span
</ div
< / body
</ html
in IE, after running this code, it will pop up two windows in turn, Show "DIV", "437" respectively, representing offsetparent and offsetleft respectively. In the figure below, the red border represents the body element, and the black border represents the div element. So that even in IE, offsetparent is not the BODY element, the Offsetleft calculation is also based on the BODY element as the standard.
figure one: results in IE7
in Ie 8 beta 1 the bug has been fixed and will return "DIV", "411" respectively. has met the same standards as other browsers.
current 1/2 page 1 2 Next read the full page
