HTML DOM offsetLeft 属性 | DOM 对象:HTML DOM 元素对象

返回到:DOM 对象:HTML DOM 元素对象

定义和用法

offsetLeft 是一个只读属性,返回当前元素相对于 offsetParent 节点左边界的偏移像素值。

返回值包含:

  • 元素向左偏移的像素值,元素的外边距(margin)
  • offsetParent 元素的左侧内边距(padding)、边框(border)及滚动条

注意: offsetParent 元素是一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的元素。/p>

提示: 获取元素顶部的偏移量使用 offsetTop 属性。

HTML DOM offsetLeft 属性 | DOM 对象:HTML DOM 元素对象

浏览器支持

属性谷歌IE火狐苹果opera
offsetLeftYesYesYesYesYes

语法

element.offsetLeft 

技术细节

返回值:返回一个整数,表示该元素的左侧偏移量,单位是像素 px。

实例

获取 div 元素的左侧偏移量:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#test {
  left: 100px;
  margin: 10px;
  padding: 10px;
  width: 300px;
  position: relative;
  border: 5px solid black
}
</style>
</head>
<body>

<div id="test">
  <p>点击按钮获取 div 元素的左侧偏移量:</p>
  <p><button onclick="myFunction()">点我</button></p>
  <p>offsetLeft 为: <span id="demo"></span></p>
</div>

<script>
function myFunction() {
  var testDiv = document.getElementById("test");
  document.getElementById("demo").innerHTML = testDiv.offsetLeft;
}
</script>

</body>
</html>

获取 div 元素的位置:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#test {
  left: 100px;
  top: 50px;
  margin: 10px;
  padding: 10px;
  width: 300px;
  position: relative;
  border: 5px solid black
}
</style>
</head>
<body>

<div id="test">
  <p>点击按钮获取 div 元素的位置:</p>
  <p><button onclick="myFunction()">点我</button></p>
  <p id="demo">offsetLeft: <br>offsetTop: </p>
</div>

<script>
function myFunction() {
  var testDiv = document.getElementById("test");
  var demoDiv = document.getElementById("demo");
  demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
}
</script>

</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/javascriptbook/domtips/4478.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年12月10日 下午4:18
下一篇 2021年12月10日 下午5:45

相关推荐

发表回复

登录后才能评论