文章导航

JavaScript scrollWidth

2018-11-18 16:12| 作者: admin| 查看: 976| 评论: 0|来自: 蚂蚁部落

scrollWidth属性可以返回元素的内容宽度,返回一个数值(单位是像素)。

现在关键问题出现了,那就是这个"内容宽度"指的元素的哪一部分。

对于width属性,大家都很熟悉,它可以返回元素的宽度。

但是元素可能会出现滚动条,有些尺寸会被遮挡。

效果演示截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/18/161321ea144te1p1b1was4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,元素出现scroll水平滚动条,说明有一部分宽度在不可视范围内。

scrollWidth属性用于获取的宽度,包括不可见范围内的宽度。

与scrollWidth相对应的是scrollHeight属性。

只读属性,不能赋值。

语法结构:

[JavaScript] 纯文本查看 复制代码
dom.scrollWidth

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant {
  width:100px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
}
</style>
<script>
window.onload = function () {
  let odiv=document.getElementById("ant");
  let num = odiv.scrollWidth;
  odiv.innerHTML = num;
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/18/161407ngspol9a1gxo1sza.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).120是scrollWidth属性返回值。

(2).scrollWidth包含左右内边距的尺寸。

(3).scrollWidth属性值不包括左右边框尺寸,但是包括左右内边距尺寸。

(4).div元素没有出现水平滚动条,此时scrollWidth属性值与clientWidth属性值相同。

(5).120 = 100(width)+ 10(padding-left)+ 10(padding-right)。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant {
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
  overflow:auto;
}
#inner{
  width:180px;
  height:10px;
}
</style>
<script>
window.onload = function () {
  let odiv=document.getElementById("ant");
  let oshow=document.getElementById("show");
  let num = odiv.scrollWidth;
  oshow.innerHTML = num;
}
</script>
</head>
<body>
<div id="ant">
  <div id="inner"></div>
</div>
<div id="show"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/18/161442iplyf5pl1yqal30i.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).外层div元素出现滚动条,那么它的内容宽度大于width+padding。

(2).这时scrollWidth属性值等于子元素宽度加上它padding-left值,需要特别注意,从上面图示也可以看出,只有左内边距宽度会被计算在内,右内边距不会对scrollWidth宽度产生影响,同时设置左右外边距时,左外边距优先级高。

(3).190 = 180(width) + 10 (padding-left).

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant {
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background:#ccc;
  margin:5px;
  padding:10px;
  border:5px solid blue;
  overflow:auto;
}
#inner{
  width:100px;
  height:100px;
  background-color:green;
}
</style>
<script>
window.onload = function () {
  let odiv=document.getElementById("ant");
  let oshow=document.getElementById("show");
  let num = odiv.scrollWidth;
  oshow.innerHTML = num;
}
</script>
</head>
<body>
<div id="ant">
  <div id="inner"></div>
</div>
<div id="show"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/18/161514mpxkcdu6yfmptmfd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).scrollWidth不包含垂直滚动条(如果有的话)的宽度。

(2).谷歌浏览器滚动条的宽度是17px,也许以后会变,也许根据浏览器类型不同而不同,实测为准。

(3).123 = 120(width)+ 10(padding-left)+ 10(padding-right)- 17。

(4).如果出现水平滚动条,与paddng-right一样,滚动条宽度不会对scrollWidth宽度产生影响,不再演示。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部