getComputedStyle() 获取css样式
用法：getComputedStyle(element).width
var child=document.querySelector(".child");
console.log(getComputedStyle(child).width);
只能操作内嵌样式-->style里面的单个属性(HTML DOM)
获取 所有方法 设置的 样式（兼容）
//currentStyle
console.log(div.currentStyle.color);//IE** **6-8******
console.log(div.currentStyle.fontSize);//IE** **6-8******
//getComputedStyle
console.log(getComputedStyle(div).color);
console.log(getComputedStyle(div).fontSize);
//设置 所有方法样式--->只能设置内嵌 内嵌>内部和外部****
div.style.color="pink";
批量设置元素样式
获取某个元素样式
client系列
不存在clientRight和clientBottom，这两个属性的属性值是undefined
获取可视化区域的宽度/高度
- document.documentElement.clientWidth || document.body.clientWidth
- document.documentElement.clientHeight || document.body.clientHeight
offset系列
父级参照物：一般情况下，页面中的元素的父级参照物都是body，如果给页面中的某个元素添加position属性（脱离文档流，float是半脱离文档流，所以不能使用float），那么该元素的所有子孙元素的父级参照物都是该元素。
scroll系列
以上13个属性，除了scrollTop和scrollLeft这两个属性外，剩下的11个属性都是只读属性
获取当前元素距离body的偏移量
//第一种方法：while循环
function offset(curEle) {
let left = curEle.offsetLeft;
let top = curEle.offsetTop;
let parent = curEle.offsetParent;
//判断父级参照物是不是body
while (parent!===document.body) {
left += parent .clientLeft + parent .offsetLeft;
top += parent .clientTop + parent .offsetTop;
parent = parent .offsetParent;
}
return {
left: left,
top: top
}
}
//第二种方法：递归
function offset2(ele) {
let parent = ele.offsetParent;
if (parent === document.body) {
return ele.offsetLeft;
} else {
return ele.offsetLeft + parent.clientLeft + offset2(parent);
}
}
应用
回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title>珠峰培训</title>
<link rel="icon" href="">
<!--引入外部文件-->
<link rel="stylesheet" href="">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#content {
width: 100px;
height: 100px;
border-radius: 50%;
background: pink;
position: fixed;
bottom: 10px;
right: 10px;
text-align: center;
line-height: 100px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="content">回到顶部</div>
<img src="img/1.png" alt="">
<img src="img/1.png" alt="">
<script>
let btn = document.getElementById("content");
window.onscroll = function () {
let winH = document.documentElement.clientHeight || document.body.clientHeight;
let winT = document.documentElement.scrollTop || document.body.scrollTop;
if (winT > winH) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
let timer = null;
btn.onclick = function () {
clearInterval(timer);
let winT = document.documentElement.scrollTop;
timer = setInterval(function () {
if (winT <= 0) {
document.documentElement.scrollTop = 0;
clearInterval(timer);
return;
}
winT -= 50;
document.documentElement.scrollTop = winT;
console.log(winT);
}, 13)
}
</script>
</body>
</html>
