Home > Developer > JavaScript
Before reading this article, take a look at the offsetParent attribute of the first Article Javascript drag-and-drop series Article 1. It is a good habit to step by step and is 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>
<MetaHttp-equiv= "Content-Type"Content= "Text/html; charsets = 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">Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<SpanId= "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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
