Before reading this article, take a look at the first article Article The offsetparent attribute of JavaScript drag-and-drop series Article 1 is a good habit and worth advocating.
Okay. Let's take a look at our contents today.
First, let's take a look at the element. offsetleft attribute.
Supported browsers: Internet Explorer 4.0 +, Mozilla 1.0 +, Netscape 6.0 +, opera 7.0 +, and Safari 1.0 +
Definition: returns a pixel value that represents the offset from the left edge of the current element to the left edge of the object returned by its offsetparent attribute.
Syntax:
Leftdis = element. offsetleft
There is a bug in the implementation of the offsetleft attribute in Internet Explorer. Regardless of the value of the offsetparent attribute of the current element, it always calculates the offsetleft with the body element as the reference object. Fortunately, this bug has been fixed in intern Explorer 8 Beta 1. You still need to note that IE will calculate offsetleft from the left-border of the Body element as the standard, while other browsers will start from left-margin.
Test Code 1:
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd" >
< Html >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charsets = UTF-8" />
< Title > Untitled document </ Title >
< Style Type = "Text/CSS" >
Body {
Border : 1px solid red ;
Margin-left : 0px ;
}
# Parent {
Position : Relative ;
Left : 25px ;
Top : 0px ;
Border : 1px solid black ;
}
</ Style >
< Script Type = "Text/JavaScript" Language = "JavaScript" >
Function Offset_init (){
VaR Pelement = Document. getelementbyid ( " Sonobj " );
Parentobj = Pelement. offsetparent;
VaR Ioffsetleft = Pelement. offsetleft;
Alert (parentobj. tagname );
Alert (ioffsetleft );
}
</ Script >
</ Head >
< Body Onload = "Offset_init ()" >
< Div ID = "Parent" > Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
< Span ID = "Sonobj" > Test the offsetparent attribute </ Span >
</ Div >
</ Body >
</ Html >
In IE, after running this code, two windows are displayed, namely "Div" and "437", indicating offsetparent and offsetleft respectively. In, the red border represents the body element, and the black border represents the DIV element. This proves that, even in IE, offsetparent is not a body element, the offsetleft calculation is based on the Body element.
Figure 1: results in IE7
In IE 8 Beta 1, this bug has been fixed and "Div" and "411" are returned respectively ". It is already in line with the standards of other browsers.