定义和用法
offsetWidth 属性是一个只读属性,它返回该元素的像素宽度,宽度包含内边距(padding)和边框(border),不包含外边距(margin),是一个整数,单位是像素 px。
通常,元素的 offsetWidth 是一种元素 CSS 宽度的衡量标准,包括元素的边框、内边距和元素的水平滚动条(如果存在且渲染的话),不包含 :before或 :after 等伪类元素的宽度。
对于文档的 body 对象,它包括代替元素的 CSS 宽度线性总含量高。浮动元素的向下延伸内容宽度是被忽略的。
如果元素被隐藏(例如:元素或者元素的祖先之一的元素的 style.display 被设置为 none),则返回 0。
提示: 该属性通常与 offsetHeight 属性一起使用。
提示: 使用 clientHeight 和 clientWidth 属性返回元素的可见高度和宽度,仅包括内边距(padding)。
提示: 元素添加滚动条,可以使用 overflow 属性。
这是一个只读属性。
浏览器支持
属性 | 谷歌 | IE | 火狐 | 苹果 | opera |
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
语法
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