1.offset家族
用于获取元素自身的位置和大小！！！
1-offsetTop
距离顶部的距离
2-offsetLeft
距离左边的距离
注意！！：这里的距离都是与离他们最近的父盒子的距离，但是他们的父盒子要有定位，如果没有定位，那他们的距离就是和body的距离。
3-offsetWidth
自身的宽度
4-offsetHeight
自身的宽度
注意：这里的宽高 = padding + border + Height或width
5-offsetParent
返回带有定位的父亲，没有则返回body。这里是一层一层的找。
son.parentNode 这个只能返回上一级
案例：
<style>
.father {
width: 200px;
height: 200px;
border:1px solid red;
position: relative;
}
.son {
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div style="position: relative;">
<div class="father">
<div class="son"></div>
</div>
</div>
<div class="w"></div>
<script>
var father = document.querySelector(".father")
var son = document.querySelector(".son")
console.log(father.offsetTop) // 0
console.log(father.offsetLeft) // 0
console.log(son.offsetTop) // 0
console.log(son.offsetLeft) // 0
console.log(father.offsetWidth) // 202
console.log(father.offsetHeight) // 202
console.log(son.offsetParent)
</script>
offset和style区别
<style>
.box {
width: 200px;
height: 200px;
background: red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box" style="width: 200px;"></div>
<script>
var box = document.querySelector(".box")
console.log(box.offsetWidth) // 220 = padding + border + width 是数字
console.log(box.style.width) //200px 是字符串，可以进行赋值
box.style.width = "300px"
// offsetWidth是不能赋值！！！
</script>
例1：
鼠标在格子离的坐标
<style>
.box {
width: 400px;
height: 400px;
background: yellow;
margin: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector(".box");
box.addEventListener("mousemove", function(e) {
var currentX = e.pageX
var currentY = e.pageY
var x = currentX - this.offsetLeft;
var y = currentY - this.offsetTop;
this.innerHTML = "x坐标是" + x + " y坐标是" + y;
})
</script>
例2：
拖拽格子，
注意： 不要拖拽图片，因为图片有默认事件，影响程序
<style>
div {
width: 200px;
height: 200px;
background: red;
position: relative;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div")
// mousedown, 鼠标按下
div.addEventListener("mousedown", function(e) {//鼠标点下时
console.log(e)
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
function move(e) {
console.log(e)
div.style.left = e.pageX - x + "px"
div.style.top = e.pageY - y + "px"
}
window.addEventListener("mousemove", move) //鼠标悬浮时
// 需要注意的是:
window.addEventListener("mouseup", function() {//鼠标松开时
window.removeEventListener("mousemove", move)//移除事件
})
})
</script>
2.client家族
<style>
.son {
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector(".son")
console.log(son.clientHeight)
console.log(son.clientWidth) // 不带边框的宽度！！！padding + width
console.log(son.clientLeft) // 10 左边框的宽度
console.log(son.clientTop) // 10 上边框的宽度
</script>
scroll 滚动家族
</head>
<body>
<div>
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一 天下第一
</div>
<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>
例：
<style>
* {
margin:0;
padding: 0
}
ul {
width: 100%;
height: 80px;
background: #999;
font-size: 0;
}
ul li {
font-size: 20px;;
list-style-type: none;
display: inline-block;
width: calc(100% / 3);
height: 80px;
line-height: 80px;
text-align: center;
}
</style>
- 首页
- 列表
- 我的
天下第一
*200</div>
<script>
var ul = document.querySelector("ul")
document.addEventListener("scroll", function() {
console.log("document滚动了！！！")
// scrollTop
// 通过这样的方式来获取窗口卷进去的距离！！！
console.log(window.pageYOffset)
if(window.pageYOffset > 80) {
ul.style.position = "fixed";
ul.style.top = "0px";
}else {
ul.style.position = "";
ul.style.top = "";
}
})
</script>