tian~
可视区宽高
窗口宽高 - 包含滚动条的宽度
window.innerWidth / window.innerHeight
包含了滚动条的宽度和浏览器本身的边框宽度（低版本IE不支持）。
内容区宽高 - 不包含滚动条的宽度
document.documentElement.clientWidth
document.documentElement.clientHeight不包含滚动条等。
js
body{
height: 4000px;
}
/*可视区的宽高 兼容ie*/
console.log("不包含滚动条" , document.documentElement.clientWidth );
console.log("包含滚动条", window.innerWidth );
元素的各种宽高
client
clientWidth / clientHeight宽(高)+padding。
html
<style>
#wrap {
width: 100px;
height: 100px;
background-color: orange;
padding: 20px;
border: 10px solid green;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script>
let oWrap = document.getElementById("wrap");
/*关于wrap的各种宽高*/
console.log(oWrap.clientWidth); //140 width + 左右padding
console.log(oWrap.clientHeight); //140 height + 上下padding
//只读属性，无法设置值
// oWrap.clientWidth = 500;
</script>
offset
offsetWidth / offssetHeight宽(高)+padding+border。
js
console.log(oWrap.offsetWidth); //width+左右padding+左右边框
console.log(oWrap.offsetHeight); //height+上下padding+上下边框
//获取元素的最终样式
console.log(getComputedStyle(oWrap).width);//单独获取宽度
console.log(getComputedStyle(oWrap).height);//单独获取高度
console.log(getComputedStyle(oWrap).backgroundColor);
scroll （了解）
scrollWidth / scrollHeigh内容的实际高度，当内容没超出相当于client，
当内容超出之后，会得到包括超出内容的实际高度，即使加了超出隐藏，也还是会得到内容所占的实际高度。
js
/*内容实际占据的宽高，即使有overflow:hidden 也能获取*/
console.log(oWrap.scrollWidth);
console.log(oWrap.scrollHeight);
元素的各种距离
offsetLeft / offsetTop
获取左边（上边），到最近的带有定位父级的左边（上边）的距离。
html
<style>
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 100px;
height: 100px;
padding: 20px;
border: 10px solid green;
background-color: pink;
margin-top: 40px;
margin-left: 40px;
}
p{
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: purple;
margin: 20px;
}
</style>
</head>
<body>
<div id="wrap">
<p id="para"></p>
</div>
<script>
let oWrap = document.getElementById("wrap");
let oP = document.getElementById("para");
//定位父级
console.log(oWrap.offsetParent);
console.log(oP.offsetTop); //40
console.log(oP.offsetLeft); //20
console.log(oWrap.offsetTop); //40
console.log(oWrap.offsetLeft); //40
</script>
</body>
getBoundingClientRect()
<节点>.getBoundingClientRect()
兼容 IE8+
返回一个对象，包含了元素各边到窗口的距离，返回的结构类似于：{top:100,left:20,bottom:500,right:890}。
js
let oWrap = document.getElementById("wrap");
console.log(oWrap.getBoundingClientRect());
js
oWrap.getBoundingClientRect().left // 元素最左边距离浏览器可视区左边的距离
oWrap.getBoundingClientRect().top // 元素最上边距离浏览器可视区上边的距离
// 下面的不常用
oWrap.getBoundingClientRect().right // 元素最右边距离浏览器可视区左边的距离
oWrap.getBoundingClientRect().bottom // 元素最下边距离浏览器可视区上边的距离
滚动距离
页面滚动宽高(滚动后被卷去的部分)
doucment.documentElement.scrollTop
document.documentElement.scrollLeft
html
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 3000px;
height: 3000px;
}
#wrap{
width: 600px;
height: 600px;
background-color: pink;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script>
console.log(document.documentElement.scrollTop);
console.log(document.documentElement.scrollLeft);
console.log(window.scrollX); //只读
console.log(window.scrollY);
</script>
</body>
页面的滚动宽（高）。此属性可以赋值，能让页面滚动到指定的位置。
js
document.onclick = function(){
document.documentElement.scrollTo(
{top: 300 , left: 300 })
}
//等价于window.scrollTo( {top: 300 , left: 300 } );
元素的滚动宽高
元素节点.scrollTop 元素节点.scrollLeft
兼容性：
document.body.scrollTop = "100" - 无声明头写法
document.documentElement.scrollTop = "100" - 有声明头写法
两种写法兼容与浏览器无关 , 与声明头的有无有关
js
document.documentElement.scrollTop = "100" || document.body.scrollTop = "100"
//无声明头 需document.body.scrollTop = "100";
小球运动案例
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: #333;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
#ball {
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: orange;
animation: changeColor 2s ease infinite alternate;
}
#shadow p {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: orange;
animation: change 0.5s linear forwards;
transform: scale(1);
opacity: 1;
}
@keyframes change {
from {
transform: scale(1);
opacity: 1;
filter: hue-rotate(0deg);
}
to {
transform: scale(0);
opacity: 0;
filter: hue-rotate(180deg);
}
}
@keyframes changeColor {
from {
filter: hue-rotate(0deg);
box-shadow: 0 0 40px orange;
}
to {
filter: hue-rotate(180deg);
box-shadow: 0 0 40px orange;
}
}
</style>
</head>
<body>
<div id="ball"></div>
<div id="shadow">
<p></p>
</div>
<script>
let oBall = document.getElementById("ball");
let oShdow = document.getElementById("shadow");
//setInterval(function () {
// oBall.style.left = oBall.offsetLeft + 3 + "px";
//}, 60 / 1000);
//计算当前页面可视区的最大宽与最大高
let max_x = document.documentElement.clientWidth - oBall.offsetWidth;
let max_y = document.documentElement.clientHeight - oBall.offsetHeight;
/*当改变窗口大小的时候，这个两个值发生改变*/
window.onresize = function () {
max_x = document.documentElement.clientWidth - oBall.offsetWidth;
max_y = document.documentElement.clientHeight - oBall.offsetHeight;
};
//window.onresize = (function x() {
// maxLeft = document.documentElement.clientWidth - 50;
// maxTop = document.documentElement.clientHeight - 50;
// return x;
//})();
/*速度*/
let speed_x = 10;
let speed_y = 5;
(function m() {
/*变化*/
let left = oBall.offsetLeft + speed_x;
let top = oBall.offsetTop + speed_y;
/*判断大小*/
if (left >= max_x) {
left = max_x;
speed_x = -speed_x;
}
if (left <= 0) {
left = 0;
speed_x = -speed_x;
}
if (top >= max_y) {
top = max_y;
speed_y = -speed_y;
}
if (top <= 0) {
top = 0;
speed_y = -speed_y;
}
/*改变oBall的位置*/
oBall.style.left = left + "px";
oBall.style.top = top + "px";
/*创建阴影函数的执行*/
createShandow(left, top);
requestAnimationFrame(m);
})();
function createShandow(left, top) {
let oP = document.createElement("p");
oP.style.cssText = `left:${left}px ; top:${top}px`;
oShdow.appendChild(oP);
setTimeout(function () {
oShdow.removeChild(oP);
}, 500);
}
</script>
</body>
</html>