HTML DOM Style left 属性

htmlweb developmentfront end technology更新于 2024/3/15 3:24:17

HTML DOM Style left 属性用于设置或返回已定位元素的左侧位置。要定位元素，必须将其 position 属性设置为 relative、absolute 或 fixed。

以下是语法 −

设置 left 属性 −

object.style.left = "auto|length|%|initial|inherit"

以上属性解释如下 −

值	描述
auto	这是默认位置，将浏览器设置为左侧位置。
length	用于以长度单位定义左侧位置。它允许负值。
%	设置子元素左侧位置(相对于父元素宽度的百分比)。
initial	将此属性设置为初始值。
inherit	继承父级属性值

让我们看一个 left 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      margin-top:70px;
      position:absolute;
      width:100px;
      height:100px;
      background-color:red;
   }
</style>
<script>
   var setLeft=50;
   function changeLeft() {
      document.getElementById("DIV1").style.left = setLeft+"px";
   setLeft+=50;
   }
</script>
</head>
<h1>Left property example</h1>
<body>
   <div id="DIV1"></div>
   <p>Change the left position for the below div by clicking the below button</p>
   <button type="button" id="myBtn" onclick="changeLeft()">Left Position</button>
</body>
</html>