clientWidth:返回元素的可见宽度。
clientHeight:返回元素的可见高度。
这两个属性都是不带px,返回的是一个数字，可直接进行计算会获取元素宽度和高度，包括内容区和内边距.
offsetHeight：返回元素的高度。
offsetWidth：返回元素的宽度。
获取元素的整个的高度和宽度，包括内容区、内边距和边框
offsetParent：可以获取当前元素的定位父元素，会获取当前元素最近的开启了定位的父元素。如果所有的祖先元素都没有开启定位则返回body
offsetLeft：返回元素的水平偏移位置。（当前元素相对于其定位父元素的水平偏移量）
offsetTop：返回元素的垂直偏移位置。（当前元素相对于其定位父元素的垂直偏移量）
scrollWidth：返回元素的整体宽度。
scrollHeight ：返回元素的整体高度。（可以获取元素整个滚动区域的宽度和高度）
scrollLeft:可以获取水平滚动条滚动的距离
scrollTop:可以获取垂直滚动条滚动的距离
判断垂直滑动滚动条是否滑倒底，当满足scrollWidth - scrollLeft == clientWidth。说明水平滚动条滚动到底。
当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底
<!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 type="text/css">
#box1 {
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
#dl1 {
padding: 100px;
background-color: #bfa;
}
#dl2 {
width: 100px;
height: 100px;
background-color: rgb(219, 120, 120);
padding: 10px;
border: 10px solid rgb(145, 145, 8);
}
#ds1 {
width: 200px;
height: 300px;
background-color: #bfa;
overflow: auto;
}
#ds2 {
width: 450px;
height: 600px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
/*
clientWidth
clientHeight
这两个属性都是不带px,
返回的是一个数字，
可直接进行计算
会获取元素宽度和高度，
包括内容区和内边距
*/
alert(box1.clientWidth);
}
btn02 = document.getElementById("btn02");
btn02.onclick = function () {
/*
offsetHeight
offsetWeight
获取元素的整个的高度和宽度
包括内容区、内边距和边框
*/
alert(box1.offsetHeight);
}
var btn03 = document.getElementById("btn03");
var box2 = document.getElementById("box2");
var d1 = document.getElementById("d1");
btn03.onclick = function () {
/*
offsetParent
可以获取当前元素的定位父元素
会获取当前元素最近的开启了定位的父元素
如果所有的祖先元素都没有开启定位则返回body
*/
/* var ofp = box1.offsetParent;
alert(ofp);*/
/*var op = box1.offsetParent;
alert(op.id);*/
var dsp = d1.offsetParent;
alert(dsp.id);
}
/*
offsetLeft:当前元素相对于其定位父元素的水平偏移量
offsetTop:当前元素相对于其定位父元素的垂直偏移量
offsetTop的用法和下面的offsetLeft的一样，如果要是有可以参考一下。
*/
var btn04 = document.getElementById("btn04");
var dl2 = document.getElementById("dl2");
btn04.onclick = function () {
var ofl = dl2.offsetLeft;
alert(ofl);
}
/*
scrollWidth
scrollHeight
可以获取元素整个滚动区域的宽度和高度
*/
var ds1 = document.getElementById("ds1");
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
alert(ds1.clientHeight);
alert(ds1.scrollHeight);
}
var btn07 = document.getElementById("btn07");
btn07.onclick = function () {
alert(ds1.scrollWidth);
}
/*
scrollLeft:可以获取水平滚动条滚动的距离
scrollTop:可以获取垂直滚动条滚动的距离
*/
var btn08 = document.getElementById("btn08");
var btn09 = document.getElementById("btn09");
btn08.onclick = function () {
alert(ds1.scrollLeft);
}
btn09.onclick = function () {
alert(ds1.scrollTop);
}
var btn10 = document.getElementById("btn10");
btn10.onclick = function () {
alert(ds1.clientHeight);
}
/*
判断垂直滑动滚动条是否滑倒底
当满足scrollHeight - scrollTop == clientHeight
*/
var btn11 = document.getElementById("btn11");
btn11.onclick = function(){
var df = ds1.scrollHeight-ds1.scrollTop;
var dc = ds1.clientHeight;
alert("是否划到低："+(df==dc)+","+df);
}
/*
判断垂直滑动滚动条是否滑倒底
当满足scrollWidth - scrollLeft == clientWidth
说明水平滚动条滚动到底
*/
var btn12 = document.getElementById("btn12");
btn12.onclick = function(){
var df = ds1.scrollWidth-ds1.scrollLeft;
var dc = ds1.clientWidth;
alert("是否划到低："+(df==dc)+","+df);
}
}
</script>
</head>
<body>
<button id="btn01">获取内容区和内边距的高度或者宽度</button>
<br></br>
<button id="btn02">获取内容区和内边距以及边框的高度或者宽度</button>
<br></br>
<button id="btn03">获取当前元素的定位父元素</button>
<br /><br />
<button id="btn04">获取相对于父元素的偏移量left</button>
<br /><br />
<button id="btn05">获取相对于父元素的偏移量right</button>
<br /><br />
<button id="btn06">获取元素整个滚动区域的高度</button>
<button id="btn07">获取元素整个滚动区域的宽度</button>
<br /><br />
<button id="btn08">获取水平滚动条滚动的距离</button>
<button id="btn09">获取垂直滚动条滚动的距离</button>
<br></br>
<button id="btn10">其他功能按钮</button>
<button id="btn11">判断垂直滑动滚动条是否滑倒底</button>
<button id="btn12">判断垂直滑动滚动条是否滑倒底</button>
<br></br>
<div id="box3">
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</div>
<br></br>
<div id="d2" style="position: relative;">
<div id="d1">
</div>
</div>
<div id="dl1" style="position: relative;">
<div id="dl2">
</div>
</div>
<div id="ds1">
<div id="ds2"></div>
</div>
</body>
</html>
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
