大家好,又见面了,我是你们的朋友全栈君。
自接触js以来一直使用的是jquery插件,对js的了解甚少,经常容易混淆element.scrollHeight、element.scrollTop等方法。今天对这些方法做出比较。
scrollTop:可以设置或者获取元素的已滚动的上部不可见区域的高度。
<!DOCTYPE html>
<html>
<head>
<title>测试scrollHeight等的区别</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body{
padding: 0px;
margin: 0px;
}
#test{
width: 200px;
height: 200px;
border: 1px solid #cccccc;
overflow-y: auto;
margin: 300px auto;
}
#test p{
height: 20px;
margin: 0px;
}
</style>
</head>
<body>
<div id="test"><div><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></div>
</body>
</html>
上面,有一个id为test的div,里面嵌套一个div和多个p标签。
var element = document.getElementById("test");
var p = element.getElementsByTagName("p");
var pL = p.length;
for(var i=1; i<=pL; i++){
p[i-1].className = "p" + i;
}
element.scrollTop = 300;
console.log("element's scrollTop = " + element.scrollTop);
第七行代码设置了scrollTop,第八行输出了scrollTop,输出值为: element’s scrollTop = 300。蓝色部分为test里层的div所占的区域。
scrollHeight:获取元素的滚动高度。当元素内容高度超出元素高度时,scrollHeight=内容高度+自身高度。
offsetHeight:获取元素的实际高度。element.offsetHeight = element.clientHeight + border-top + border-bottom。
offsetTop:获取元素相对于离自己最近的设置定位的祖先元素的高度,如果没有,则获取相对于页面的高度。
clientHeight:获取元素的可见高度。element.clientHeight = element.height + element.padding-top + element.padding-bottom。
补充:
1:获取元素的不包括padding和border的宽高度,使用js获取css样式的方法获取。
2:获取元素下面可滚动的高度值: element.scrollHeight – element.clientHeight – element.scrollTop;
希望看到这篇文章的同学,多多指出里面的理解不当的地方。有更好的方法,可以与我分享。
转载于:https://www.cnblogs.com/yanyalun/p/4184343.html
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/163762.html原文链接:https://javaforall.cn