本文详细介绍了原生JavaScript操作盒子模型的client、offset和scroll系列API，包括各自的用途、示例及注意事项。同时，讲解了jQuery中对应的方法，如offset()、position()、scrollTop()以及获取元素尺寸的相关函数。
一、原生JS写法
js操作盒子模型：
(1)操作盒子模型的位置
(2)操作盒子模型的大小
不管是操作盒子模型的位置，还是盒子模型的大小，一共有13个api：
client系列
offset系列
scroll系列
1.client系列
client系列：
clientWidth（可视区域）: 获取盒子的内容width+左右的padding
clientHeight（可视区域）: 获取盒子的内容height+上下的padding
clientTop:获取盒子的上边框的粗细
clientLeft:获取盒子的左边框的粗细
代码示例如下：
<div
class="content"
style="
width: 150px;
height: 200px;
overflow: auto;
border-top: 5px solid red;
border-left: 10px solid yellow;
"
>
<p>contentcontentcontent</p>
<p>contentcontentcontent</p>
<p>contentcontentcontent</p>
<p>contentcontentcontent</p>
<p>contentcontentcontent</p>
<p>contentcontentcontent</p>
<p>contentcontentcontent</p>
<!-- 此处省略很多行...... -->
<p>contentcontentcontent</p>
</div>
<script>
let div=document.getElementsByClassName("content")[0];
// 获得是的是div的可视区域的宽高 不包含滚动条区域
console.log(div.clientWidth)//133
console.log(div.clientHeight)//183
console.log(div.clientTop)//上边框的粗细 5
console.log(div.clientLeft)//左边框的粗细 10
</script>
结果如下：
要获取当前页面内容的宽度（可视区域）：
// 获取一屏的宽度
console.log(document.body.clientWidth)
console.log(document.documentElement.clientWidth)
要获取当前页面内容的高度（可视区域）：
// 获取可视区域的高度
console.log(document.body.clientHeight); // 获取内容（多屏）的高度
console.log(document.documentElement.clientHeight); // 获取一屏的高度
client系列的注意点：
（1）只能获取，不能设置，它们是只读的
（2）得到的是一个数值，没有单位
（3）得到的是一个整数，不是小数，及时测试量出来是小数，也会转化成整数
（4）不管你的内容是否溢出，得到的是可视区的大小
2.offset系列
offset系列：
offsetWidth: box.offsetWidth 在clientWidth的基础上加了border
offsetHeight: box.offsetHeight 在clientHeight的基础上加了border
offsetTop: 获取一个绝对定位元素相对于参考点的上面的距离
offsetLeft: 获取一个绝对定位元素相对于参考点的左面的距离
offsetParent(***): 获取一个定位元素的参考点
代码示例1：
<style>
*{margin: 0; padding: 0;}
html{
height: 100%;
}
body{
height: 300%;
}
.box{
width: 100px;
height: 100px;
border: 5px solid red;
padding: 10px;
margin: 10px;
background-color: skyblue;
}
</style>
<div class="box">div</div>
<script>
let div=document.querySelector(".box");
console.log(div.offsetTop);
console.log(div.offsetLeft);
console.log(div.offsetParent);
</script>
结果如下：
代码示例2：
<style>
*{margin: 0; padding: 0;}
html{
height: 100%;
}
body{
height: 300%;
}
.father{
width: 400px;
height: 400px;
border: 5px solid green;
/*参考点*/
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<div class="father">
<div class="son">son</div>
</div>
<script>
let div = document.querySelector(".son");
console.log(div.offsetTop);//50
console.log(div.offsetLeft);//50
console.log(div.offsetParent);//.father
</script>
结果如下：
3.scroll系列
scroll系列:
scroll本意是滚动的意思 基本上都是在有内容溢出的情况下才会使用scroll系列
scrollWidth: 用的不多
在没有内容溢出(水平方向上的溢出)的情况下：scrollWidth == clientWidth
在内容溢出的情况下：scrollWidth的值约等于真实内容的宽度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollWidth。
只能获取值，不能设置值
scrollHeight（重点）：
在没有内容溢出的情况下：scrollHeight = clientHeight
在内容溢出的情况下：scrollHeight的值约等于真实内容的高度，不同浏览器中得到的值可能不一样
overflow属性会影响scrollHeight。
只能获取值，不能设置值
问：我要获取当前页面真实内容的高度。
答：1）document.body.scrollHeight 2）document.documentElement.scrollHeight
// 获取当前一屏的高度
console.log(document.documentElement.clientHeight)
// 获取当前网页内容高度
console.log(document.documentElement.scrollHeight)
console.log(document.body.scrollHeight)
scrollTop:
获取垂直滚动条滚动的距离（获取垂直滚动条卷去的高度）
特殊：不只可以获取，也可以设置（可读可写） 重要
问：我要获取当前页面卷上去高度。
答：1）document.body.scrollTop 2）document.documentElement.scrollTop
问：一张网页卷上去最大高度是多少？
答：scrollHeight - clientHeight
scrollLeft: 没什么用
特殊：不只可以获取，也可以设置（可读可写）
获取水平滚动条滚动的距离（获取水平滚动条卷去的距离） 基本上用不到
代码示例如下：
<style>
*{margin: 0; padding: 0;}
html{
height: 100%;
}
body{
height: 300%;
}
.box{
width: 300px;
height: 300px;
border: 5px solid green;
/*处理内容溢出*/
/*overflow: hidden;*/ /*溢出的内容隐藏*/
/*overflow: visible; */ /*溢出的内容显示 默认值*/
/*overflow: scroll;*/ /*溢出的内容显示 会出现水平和垂直的滚动条*/
overflow: auto; /*溢出的内容显示 会出现垂直滚动条*/
}
</style>
<div class="box">
<p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p><p>box</p>
</div>
<script>
let div = document.getElementsByClassName("box")[0]
console.log("scrollWidth:",div.scrollWidth);
console.log("clientWidth:",div.clientWidth);
console.log("scrollHeight:",div.scrollHeight);// 盒子真实内容的高度
console.log("clientHeight:",div.clientHeight);// 盒子一屏的高度*/
console.log("------------------------");
// 获取当前一屏的高度
console.log(document.documentElement.clientHeight);
// 获取当前网页内容高度
console.log(document.documentElement.scrollHeight);
console.log(document.body.scrollHeight);
// 当我们滚动div的滚动条时，就触发了scroll事件
div.onscroll=function(){
// 获取div里的内容卷上去的高度
console.log(div.scrollTop);
}
console.log("-----------------------------");
// 当我们滚动window的滚动条时，就触发了scroll事件
window.onscroll=function(){
console.log(document.documentElement.scrollTop);
}
</script>
结果如下：
4.总结
client系列: width, height, top, left
clientWidth/clientHeight: 获取盒子或页面可视区域的宽高
clientTop:获取盒子的上边框的大小
clientLeft:获取盒子的左边框的大小
offset系列: width, height, top, left, parent
offsetWidth/offsetHeight: 获取盒子或页面可视区域的宽高+border
offsetTop:获取一个定位元素相对于参考点的上面的距离
offsetLeft:获取一个定位元素相对于参考点的左面的距离
offsetParent:获取一个定位元素的参考点
scroll系列: width, height, top, left
scrollWidth/scrollHeight:获取盒子或页面真实内容的宽度
scrollTop:获取页面或盒子向上卷去的高度
scrollLeft:获取页面或盒子向左卷去的宽度 基本上用不到
二、jQuery写法
1.offset和position系列
获取/设置标签的位置数据
offset() 相对页面左上角的坐标
position() 相对父元素左上角的坐标
代码示例如下：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
*{
margin:0;
padding:0
}
.div1{
width:300px;
height:300px;
position:absolute;
top:20px;
left:10px;
background:blue;
margin-left:100px;
}
.div2{
position: absolute;
width:100px;
height:100px;
left:20px;
top:10px;
background-color: red;
}
.div3{
position: absolute;
top:250px;
}
</style>
</head>
<body style="height:2000px">
<div class="div1" id="demo">
<div class="div2">测试offset</div>
</div>
<div class="div3">
<button id="btn1">读取offset</button>
<button id="btn2">设置offset</button>
</div>
<script src="./js/jquery-1.11.3.js"></script>
<script>
// 需求:
// 1 通过css获取left和top
console.log($("#demo").css("left"));
console.log($("#demo").css("top"));
console.log("-----------------------");
// 2 点击btn1
// 打印div1相对页面左上角的位置
// 打印div2相对页面左上角的位置
// 打印div1相对于父元素左上角的位置
// 打印div2相对于父元素左上角的坐标
$("#btn1").click(function(){
console.log("div1相对页面左上角的位置",$(".div1").offset().left,$(".div1").offset().top);
console.log("div2相对页面左上角的位置",$(".div2").offset().left,$(".div2").offset().top);
console.log("div1相对父元素的位置",$(".div1").position().left,$(".div1").position().top);
console.log("div2相对父元素的位置",$(".div2").position().left,$(".div2").position().top);
})
// 3 点击btn2
// 设置div2相对于页面左上角的位置
$("#btn2").click(function(){
$(".div2").offset({left:600,top:100})
})
</script>
</body>
</html>
点击btn1结果如下：
点击btn2结果如下：
2.scroll系列
（1）scrollTop()
读取/设置滚动条Y轴坐标
（2）$(document.body).scrollTop+ $(document.documentElement).scrollTop()
读取页面滚动条的Y轴坐标 (兼容chrome和IE)
（3） $(‘body,html’).scrollTop(60)
滚动到指定的位置(兼容chrome和IE)
代码示例如下：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body style="height:2000px">
<div class="test" style="overflow:auto;border:1px solid black;width:100px;height:150px">
this iS some text。this iS some text。this iS some text。this iS some text。
this iS some text。this iS some text。this iS some text。
this iS some text。this iS some text。this iS some text。
this iS some text。this iS some text。this iS some text。
this iS some text。this iS some text。this iS some text。
this iS some text。thithis iS some text。s iS some text。
this iS some text。this iS some text。this iS some text。
</div>
<br>
<br>
<br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">设置滚动条scrollTop</button>
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(function(){
// 1 得到div或者页面滚动条的坐标
$("#btn1").click(function(){
// div滚动条的位置
console.log("div滚动条的位置",$(".test").scrollTop());
// 页面滚动条的位置
// console.log("页面滚动条的位置",$("body").scrollTop());//0 chrome edge不好使 IE11好使
console.log("页面滚动条的位置",$("html").scrollTop())//181 chrome edge好使 IE11不好使
// 兼容式写法：
console.log("兼容式写法：",$("body").scrollTop()+$("html").scrollTop());
// 也能获取到页面滚动条的位置
console.log($(document).scrollTop());
})
// 2 让div或者页面的滚动条滚动到指定的位置
$("#btn2").click(function(){
// 设置div滚动条位置
$(".test").scrollTop(600);
// 设置页面滚动条位置
// $("body").scrollTop(100) 谷歌不ok
// $("html").scrollTop(100) ok
// 兼容式写法
$("body,html").scrollTop(100)
// 另一种写法
$(document).scrollTop(100)
})
})
</script>
</body>
</html>
点击btn1结果如下：
点击btn2结果如下：
3.元素的尺寸
（1）内容尺寸 与css中设置的响应的属性相同
height()
width()
（2）内部尺寸
innerHeight() height+padding
innerWidth() width + padding
（3）外部尺寸
outerHeight(false/true): height+padding+border 如果是true 加上margin
outerWidth(false/true): width +padding+border 如果是true 加上margin
代码示例如下：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
<style>
div{
width:100px;
height:150px;
background-color: red;
padding:20px;
border:20px blue solid;
margin:10px;
}
</style>
</head>
<body>
<div>div</div>
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(function(){
var div=$("div");
console.log(div.width(),div.height());
console.log(div.innerWidth(),div.innerHeight());
console.log(div.outerWidth(),div.outerHeight());
console.log(div.outerWidth(true),div.outerHeight(true));
// 用css方法是字符串类型的数据
console.log(div.css("width"),div.css("height"));
})
</script>
</body>
</html>
结果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
