HTML DOM scrollWidth 属性

宇宙热恋期

HTML DOM scrollWidth 属性

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

var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;

定义和用法

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

HTML DOM scrollWidth 属性

scrollWidth 值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与 clientWidth 相同:它包含元素的内边距,但不包括边框,外边距或垂直滚动条(如果存在)。 它还可以包括伪元素的宽度,例如 ::before 或 ::after。 如果元素的内容可以适合而不需要水平滚动条,则其 scrollWidth等于 clientWidth

这是一个只读属性。

HTML DOM scrollWidth 属性


浏览器支持

属性
scrollWidth Yes Yes Yes Yes Yes

语法

element.scrollWidth 

技术细节

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

更多实例

使用 padding(内边距), border(边框), scrollbar(滚动条) 以及 margin(外边距)来演示 scrollWidth 和 scrollHeight 属性的变化:

var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;

返回元素 scrollHeight 和 scrollWidth 属性的值,然后将获取的高度和宽度来设置另外一个元素的 scrollHeight 和 scrollWidth 属性值:

var elmnt = document.getElementById("content");
 
function getFunction() {
  var x = elmnt.scrollWidth;
  var y = elmnt.scrollHeight;
}
 
function setFunction() {
  elmnt.style.height = y.scrollHeight + "px";
  elmnt.style.width = y.scrollWidth + "px";
}


版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码