[原生JS]
一、offSet系列
* {
margin: 0;
padding: 0;
}
##
.father {
/* position: relative; */
width: 200px;
height: 200px;
background-color: pink;
margin: 150px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
margin-left: 45px;
}
<div class="father">
<div class="son"></div>
</div>
image.png
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移位置,返回不带单位的数值
//它以带有定位的父亲为准,如果没有父亲或者父亲没有定位，则以body为准
console.log(father.offsetTop); //100
console.log(father.offsetLeft); //100
console.log(son.offsetTop); //100,如果父元素加了定位就是0
console.log(son.offsetLeft); //150
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
console.log(father.offsetWidth);//200
console.log(father.offsetHeight);//200
// 3. 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
二、client系列
// client宽度和offsetWidth 最大的区别就是不包含border边框
console.log(son.clientWidth); //100，返回元素padding+width
console.log(son.clientTop); //0，返回元素上边框的大小
三、事件对象
(1)鼠标事件
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
（2）移动端触摸事件
var div = document.querySelector('div');
//获取手指初始坐标
var startX = 0;
var startY = 0;
//获得盒子原来的位置
var x = 0;
var y = 0;
div.addEventListener('touchstart', function(e) {
// 获取手指初始坐标
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
});
div.addEventListener('touchmove', function(e) {
console.log(e);
// 计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
var moveX = e.targetTouches[0].pageX - startX;
var moveY = e.targetTouches[0].pageY - startY;
// 移动我们的盒子 盒子原来的位置 + 手指移动的距离
this.style.left = x + moveX + 'px';
this.style.top = y + moveY + 'px';
e.preventDefault(); // 阻止屏幕滚动的默认行为
});
四、scroll系列
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
overflow: auto;
}
<div>
我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
</div>
image.png
var div = document.querySelector('div');
console.log(div.scrollWidth); //205，返回实际宽度，不含边框，注意是实际展开的宽度，滚动条额外占15px的宽度
console.log(div.scrollHeight); //208返回实际高度，不含边框，注意是实际展开的高度
console.log(div.clientHeight); //220，返回元素padding+height
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function() {
console.log(div.scrollTop); //返回被卷去上侧距离
})
//让滚动条不额外占据宽度
div::-webkit-scrollbar{
width:0;
}
页面滚动事件
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {
// window.pageYOffset 页面被卷去的头部
// 3 .当页面被卷去的头部大于等于了banner在页面文档中的距离，此时侧边栏就要改为固定定位
if (window.pageYOffset >= banner.offsetTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
})
[JQuery]
一、获取元素大小
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
image.png
$(function() {
// 1. width() / height() 获取设置元素width和height大小
console.log($("div").width()); //200
// $("div").width(300); //设置div的宽度
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth()); //220
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth()); //250
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true)); //290
})
二、获取元素位置(offset 和 position)
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
position: relative;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
position: absolute;
left: 10px;
top: 10px;
}
image.png
$(function() {
// 1. 获取设置距离文档的位置（偏移）offset
console.log($(".son").offset());//{top: 110,left: 110}
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置（偏移）position如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position()); //{top: 10,left: 10}
console.log($(".son").position().top);
// $(".son").position({
// top: 200,
// left: 200
// });
})
三、scroll系列
body {
height: 2000px;
background-color: greenyellow;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
.back {
position: fixed;
width: 50px;
height: 50px;
line-height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
font-size: 12px;
}
<div class="back">返回顶部</div>
<div class="container"></div>
image.png
<script>
$(function() {
// 被卷去的头部scrollTop() / 被卷去的左侧scrollLeft()
$(document).scrollTop(100);//页面向上滚动100px
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);// 无动画效果
$("body, html").stop().animate({
scrollTop: 0
});
// 不能是文档而是 html和body元素做动画
// $(document).stop().animate({
// scrollTop: 0
// });
})
})
</script>
四、%E5%92%8C)
(document)的区别
-
(document).height()的区别
$(window).height() //代表了当前可见区域的大小,也就是你浏览器所能看到的页面的那部分高度。
$(document).height() //则代表了整个文档的高度。
//注意当浏览器窗口大小改变时(如最大化或拉大窗口后) $(window).height() 随之改变，但是$(document).height()是不变的
-
(document).scroll()的区别
-
(document).scrollTop()的区别
两者在使用效果上区别不大，但所有浏览器基本都支持$(window).scroll()，但$(document).scroll()就不一定了。
$(window).scroll(function () {
...
});
1、要获取顶端: 只需要获取到scrollTop()==0的时候就是顶端了
2、要获取底端: 只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道已经滚动到底端了
