posLeft property
Sets or retrieves the left position of the object in the units specified by the left attribute.
Syntax
posLeft: float
Property values
float-
A Floating-point that specifies or receives any valid floating-point number that uses the same CSS Values and Units Reference as the left attribute.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Remarks
This property reflects the value of the Cascading Style Sheets (CSS) left attribute for positioned items. This property always returns zero for nonpositioned items because "left" has meaning only when the object is positioned. If the left attribute is not set, the posLeft property returns zero. Use the offsetLeft property to calculate actual positions within the document area.
Setting this property changes the value of the left position but leaves the units designator for the property unchanged.
Unlike the left property, the posLeft property value is a floating-point number, not a string.
For more information about how to access the dimension and location of elements on the page through the Dynamic HTML (DHTML) Document Object Model (DOM), see Measuring Element Dimension and Location with CSSOM in Internet Explorer 9.
Examples
This example uses the posLeft property to move the first img object left by 10 units.
<script>
document.all.tags("img").item[0].style.posLeft -= 10;
</script>
This example uses a timer to change the value of the posLeft in increments of 10.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/pixelWidth.htm
<!DOCTYPE html> <html> <head> <title>pixelWidth</title> </head> <body onload="scaleThis(); moveThis(); scaleThis2(); moveThis2()"> <span style="position: absolute; top: 5px; left: 5px; color: white; background-color: black">SAMPLE SHOWING SCALING AND MOVING</span> <div> <img id="sphere" style="position: relative; top: -10px; left: -10px; width: 10px; height: 15px; z-index: 1" src="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/graphics/sphere.jpg" border="0" alt="sphere"> </div> <div> <img id="sphere2" style="position: relative; top: -10px; left: 200px; width: 10px; height: 15px; z-index: 2" src="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/graphics/sphere.jpg" border="0" alt="sphere"> </div> <script> function scaleThis() { if (sphere.style.pixelWidth < 900) { sphere.style.pixelWidth += 4; sphere.style.pixelHeight += 4; window.setTimeout(scaleThis, 1); } } function moveThis() { if (sphere.style.posLeft < 900) { sphere.style.posTop += 2; sphere.style.posLeft += 2; window.setTimeout(moveThis, 1); } } function scaleThis2() { if (sphere2.style.pixelWidth < 900) { sphere2.style.pixelWidth += 2; sphere2.style.pixelHeight += 2; window.setTimeout(scaleThis2, 1); } } function moveThis2() { if (sphere2.style.posLeft < 900) { sphere2.style.posTop += 1; sphere2.style.posLeft += 1; window.setTimeout(moveThis2, 1); } } </script> </body> </html>
Requirements
|
Minimum supported client |
Windows XP |
|---|---|
|
Minimum supported server |
Windows 2000 Server |
|
Header |
|
|
IDL |
|
|
DLL |
|
See also