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 ToAll elements
Mediavisual
Inheritedno
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.


<!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 [desktop apps only]

Minimum supported server

Windows 2000 Server [desktop apps only]

Header

Mshtml.h

IDL

Mshtml.idl

DLL

Mshtml.dll

See also

defaults
runtimeStyle
style
pixelLeft

 

 

Show:
© 2014 Microsoft. All rights reserved.