DOM操作之三大家族(offset client scroll)

253 阅读1分钟

offset client scroll 用于获取元素自身的位置和大小!

offset

offsetlef都是查找最近一个带有定位的父元素

如果没有定位的父元素,就一级一级往外找

var baba=document.querySelector(".baba");

var erzi=document.querySelector(".erzi");

console.log(baba.offsetTop);

console.log(baba.offsetLeft);

offset不能直接进行赋值,和style有一定差别!!!

查找自身的大小

offsetwidth=padding+width+border;

console.log(baba.offsetWidth);

console.log(baba.offsetHeight);

client(不常用)

var son = document.querySelector(".son")

console.log(son.clientHeight)

console.log(son.clientWidth) // 不带边框的宽度!!!padding + width

console.log(son.clientLeft) // 左边框的宽度

console.log(son.clientTop) // 上边框的宽度

scroll(把元素卷进去)

<script>
// scroll 滚动!!!
var div = document.querySelector("div")
console.log(div.scrollHeight) // 滚动高度(里面的内容)
console.log(div.scrollWidth)
//连续触发事件!!!
div.addEventListener("scroll", function() {
// console.log("进行滚动了!!!")
console.log(div.scrollTop) // 卷到里面的高度
})
</script>