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

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

定义和用法

offsetWidth 属性是一个只读属性,它返回该元素的像素宽度,宽度包含内边距(padding)和边框(border),不包含外边距(margin),是一个整数,单位是像素 px。

通常,元素的 offsetWidth 是一种元素 CSS 宽度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含 :before或 :after 等伪类元素的宽度。

对于文档的 body 对象,它包括代替元素的 CSS 宽度线性总含量高。浮动元素的向下延伸内容宽度是被忽略的。

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

如果元素被隐藏(例如:元素或者元素的祖先之一的元素的 style.display 被设置为 none),则返回 0。

提示: 该属性通常与 offsetHeight 属性一起使用。

提示: 使用 clientHeight 和 clientWidth 属性返回元素的可见高度和宽度,仅包括内边距(padding)。

提示: 元素添加滚动条,可以使用 overflow 属性。

这是一个只读属性。

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

浏览器支持

属性谷歌IE火狐苹果opera
offsetWidthYesYesYesYesYes

语法

element. offsetWidth 

技术细节

返回值:返回一个整数,表示该元素的像素宽度。

实例

获取 div 元素的宽度,包含内边距(padding)和边框(border):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}
</style>
</head>
<body>

<p>点击按钮获取 div 元素的高度,包含内边距(padding)和边框(border):</p>

<button onclick="myFunction()">点我</button>

<div id="myDIV">
  <b>div 的样式信息:</b><br>
  Height: 250px<br>
  Width: 400px<br>
  padding: 10px<br>
  margin: 15px<br>
  border: 5px<br>
  <p id="demo"></p>
</div>

<script>
function myFunction() {
  var elmnt = document.getElementById("myDIV");
  var txt = "div 元素的高度,包含内边距(padding)和边框(border):" + elmnt.offsetHeight + "px<br>";
  txt += "div 元素的宽度,包含内边距(padding)和边框(border):" + elmnt.offsetWidth + "px";
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

以下实例演示了 clientHeight/clientWidth 和 offsetHeight/offsetWidth 属性的区别:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}
</style>
</head>
<body>

<p>点击按钮获取 div 的 clientHeight, clientWidth, offsetHeight 和 offsetWidth 属性值。</p>

<button onclick="myFunction()">点我</button>

<div id="myDIV">
  <b>div 的样式信息:</b><br>
  Height: 250px<br>
  Width: 400px<br>
  padding: 10px<br>
  margin: 15px<br>
  border: 5px<br>
  <p id="demo"></p>
</div>

<script>
function myFunction() {
  var elmnt = document.getElementById("myDIV");
  var txt = "";
  txt += "高度包含内边距(padding): " + elmnt.clientHeight + "px<br>";
  txt += "高度包含内边距(padding)和边框(border): " + elmnt.offsetHeight + "px<br>";
  txt += "宽度包含内边距(padding): " + elmnt.clientWidth + "px<br>";
  txt += "宽度包含内边距(padding)和边框(border): " + elmnt.offsetWidth + "px";
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

以下实例演示了在元素添加滚动条后 clientHeight/clientWidth 和 offsetHeight/offsetWidth 属性的区别:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
#myDIV {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
  overflow: auto;
}

#myDIV2 {
  height: 250px;
  width: 400px;
  padding: 10px;
  margin: 15px;
  border: 5px solid red;
  background-color: lightblue;
}

#content {
  height: 800px;
  width: 2000px;
  background-color: lightyellow;
}
</style>
</head>
<body>

<p>在这个实例中,子 div 元素 (#content) 插入到第一个 div 中,由子 div 元素 比第父 div元素 (#myDIV) 大, 
(子元素为 800x2500 ,父元素为 250x400), 所以我们使用了滚动条。</p>

<p>点击按钮获取 div 元素的 clientHeight, offsetHeight, clientWidth 和 offsetWidth 属性值。</p>

<button onclick="myFunction()">点我</button>

<p>请注意父 div 中的滚动条"得到"子 div 的右侧和底部内边距(padding),这导致父 div 中 clientHeight 和 clientWidth 的返回值低于另一个,而 offsetHeight 和 offsetWidth 不受此影响。
<div id="myDIV">
  <div id="content"></div>
</div>

<div id="myDIV2">
  <div id="content2"></div>
</div>

<script>
function myFunction() {
  var elmnt = document.getElementById("myDIV");
  var txt = "";
  txt += "<b>div 的样式信息:</b><br>";
  txt += "高度包含内边距(padding): " + elmnt.clientHeight + "px<br>";
  txt += "高度包含内边距(padding)、边框(border)及滚动条: " + elmnt.offsetHeight + "px<br>";
  txt += "宽度包含内边距(padding): " + elmnt.clientWidth + "px<br>";
  txt += "宽度包含内边距(padding)、边框(border)及滚动条:  " + elmnt.offsetWidth + "px";
  document.getElementById("content").innerHTML = txt;

  var elmnt2 = document.getElementById("myDIV2");
  var txt2 = "";
  txt2 += "<b>div2 的样式信息:</b><br>";
  txt2 += "高度包含内边距(padding): " + elmnt2.clientHeight + "px<br>";
  txt2 += "高度包含内边距(padding)和边框(border): " + elmnt2.offsetHeight + "px<br>";
  txt2 += "宽度包含内边距(padding): " + elmnt2.clientWidth + "px<br>";
  txt2 += "宽度包含内边距(padding)和边框(border): " + elmnt2.offsetWidth + "px";
  document.getElementById("content2").innerHTML = txt2;
}
</script>

</body>
</html>

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

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

相关推荐

发表回复

登录后才能评论