HTML DOM element.scrollWidth属性; 返回元素的宽度,包括padding

使用scrollWidth属性返回元素的宽度,单位为pixel,包括padding,不包括 线框border、滑动条、外缘(margin)

注:使用scrollheight属性返回元素的宽度。使用scrollHeight属性、 scrollWidth属性返回元素的高度和宽度包括不可见部分。CSS文档中不可见部分使用overflow属性定义。

scrollWidth属性为只读属性。

scrollWidth属性的语法、参数、返回值
语法 element.scrollWidth
返回值 数值,元素的宽度,单位pixel

使用例1



HTML+javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#myD {

margin-top: 10px;

height: 200px;

width: 250px;

overflow: auto;

}

#content {

height: 500px;

width: 1000px;

padding: 10px;

background-color: lightblue;

}

</style>

</head>

<body>

<p>点击以下按钮,获取id="content"的div元素的宽度和高度</p>

<button onclick="myFc()">按钮</button>

<div id="myD">

<div id="content">内容</div>

</div>

<p id="demo"></p>

<script>

function myFc() {

var elmnt = document.getElementById("content");

var y = elmnt.scrollHeight;

var x = elmnt.scrollWidth;

document.getElementById ("demo").innerHTML = "高度: " + y + "px<br>宽度: " + x + "px";

}

</script>

</body>

</html>

使用例2



HTML+javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#content {

height: 100px;

width: 100px;

padding: 5px;

border: 5px solid #ccc;

margin: 10px;

overflow: scroll;

background-color: lightblue;

}

</style>

</head>

<body>

<p>点击以下按钮,获取id="content"的div元素的宽度和高度</p>

<button onclick="myFc()">按钮</button>

<div id="content">div元素里的一些内容,获取到的宽度、高度为实际值,当元素内的内容超出实际设定值时,返回实际的高度和宽度值。</div>

<p id="demo"></p>

<script>

function myFc() {

var elmnt = document.getElementById("content");

var y = elmnt.scrollHeight;

var x = elmnt.scrollWidth;

document.getElementById ("demo").innerHTML = "高度: " + y + "px<br>宽度: " + x + "px";

}

</script>

</body>

</html>

使用例2



HTML+javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#content {

height: 100px;

width: 100px;

padding: 10px;

border: 5px solid #ccc;

margin: 10px;

overflow: scroll;

background-color: lightblue;

}

</style>

</head>

<body>

<p>点击"获取"按钮,获取id="content"的div元素的宽度和高度,点击"设置",给div元素重新设置宽度和高度</p>

<button onclick="myG()">获取</button>

<button onclick="myS()">设置</button>

<div id="content">div元素里的一些内容,获取到的宽度、高度为实际值,当元素内的内容超出实际设定值时,返回实际的高度和宽度值。</div>

<p id="demo"></p>

<script>

var elmnt = document.getElementById("content");

function myG() {

var y = elmnt.scrollHeight;

var x = elmnt.scrollWidth;

document.getElementById ("demo").innerHTML = "高度: " + y + "px<br>宽度: " + x + "px";

}

function myS() {

elmnt.style.height = elmnt.scrollHeight + "px";

elmnt.style.width = elmnt.scrollWidth + "px";

}

</script>

</body>

</html>

不同浏览器的对应情况

属性
scrollWidth 8.0 4.0 3.0 4.0 yes

关联内容