本文详细介绍了网页中不同元素的尺寸和滚动属性，包括`clientWidth`、`clientHeight`、`offsetWidth`、`offsetHeight`、`scrollWidth`、`scrollHeight`等，以及如何获取浏览器窗口大小和文档尺寸。通过示例代码展示了如何进行平滑滚动，并探讨了这些属性在实际布局和滚动操作中的应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
margin: 1px;
}
#y1 {
height: 200px;
width: 200px;
border: 1px solid rgb(71, 14, 78);
background-color: antiquewhite;
overflow: auto;
}
#y2 {
height: 2000px;
width: 2000px;
background-color: rgb(46, 70, 122);
}
#xy3 {
height: 300px;
width: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="y1">
<div id="xy3"></div>
</div>
<div id="y2"></div>
<script>
var y1=document.querySelector("#y1");
var y2 = document.getElementById("y2");
var xy3 = document.querySelector("#xy3");
console.log("整个浏览器窗口的高度",window.innerHeight); //整个浏览器窗口的高度 包括滚动条
console.log("整个浏览器窗口的宽度",window.innerWidth); //整个浏览器窗口的宽度
console.log("整个浏览器窗口的高度",document.documentElement.clientHeight);//整个浏览器窗口的高度 不包括滚动条
console.log("整个浏览器窗口的宽度",document.documentElement.clientWidth);//整个浏览器窗口的宽度
console.log("整个文档的高度",document.documentElement.offsetHeight);//整个文档的高度 //包含body的margin
console.log("整个文档的高度",document.body.offsetHeight);//整个文档的高度 不包含body的margin
console.log("可视区域的宽度",document.documentElement.offsetWidth); //可视区域的宽度
console.log("整个文档的真是高度",document.documentElement.scrollHeight); //整个文档的真是高度
console.log("整个文档的真实宽度",document.documentElement.scrollWidth); //整个文档的真实宽度
console.log("当前元素的宽度",y1.clientWidth); //当前元素的宽度 不包括滚动条，边框
console.log("当前元素的宽度",y1.clientHeight); //当前元素的宽度
console.log("当前元素的宽度",y1.offsetWidth); //当前元素的宽度 包括滚动条，边框
console.log("当前元素的高度",y1.offsetHeight); //当前元素的高度
console.log("到定位父元素的上边距离",y1.offsetTop); //到定位父元素的上边距离
console.log("到定位父元素的左边距离",y1.offsetLeft); //到定位父元素的左边距离
console.log("当前元素的上边框宽度",y1.clientTop); //当前元素的上边框宽度
console.log("当前元素的左边框宽度",y1.clientLeft); //当前元素的左边框宽度
console.log("元素的真实宽度",y1.scrollWidth); //元素的真实宽度 受子元素影响
console.log("元素的真实高度",y1.scrollHeight); //元素的真实高度
y1.scrollLeft = 50 //设置距离左侧的滚动距离
if(y1.scrollTo){
y1.scrollTo({ //当有滚动条时，当前滚动的距离 ie完全不支持该属性
top: 50, //距离顶部的滚动距离
behavior: "smooth" //平滑滚动 instant瞬间移动
});
}else{console.log("ie浏览器不支持scrollTo属性");}
console.log("距离左侧的滚动距离",y1.scrollLeft);
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
