获得元素样式属性
window.getComputedStyle
<!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>
#box {
width: 200px;
height: 200px;
border: 10px solid blue;
background-color: red;
padding: 20px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
let box = document.getElementById('box');
// 获得元素样式
// 获得元素样式属性:window.getComputer
console.log(window.getComputedStyle(box).width);//200px
console.log(window.getComputedStyle(box)['width']);//200px
console.log(window.getComputedStyle(box).height);//200px
console.log(window.getComputedStyle(box).border);//10px solid rgb(0, 0, 255)
console.log(window.getComputedStyle(box).backgroundColor);//rgb(255, 0, 0)
// 封装获得元素样式属性的函数
function getStyle(elm, attr) {
return window.getComputedStyle(elm)[attr];
}
console.log(getStyle(box, 'padding'));
</script>
</body>
</html>
scroll家族属性
scrollWidth
:内容的宽(content+padding+scrollLeft的最大值)scrollHeight:
内容的高(content+padding+scrollTop的最大值)scrollTop
:垂直滚动距离(并不是页面滚动的距离)scrollLeft:
水平滚动距离(并不是页面滚动的距离)获得页面的滚动距离(利用||短路运算)
函数封装:
function getScroll() {
// 页面滚动有两个方向,应该需要返回两个值
// 准备多个方法,让浏览器各取所需即可
return {
scrollTop: document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0,
scrollLeft: document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft || 0
}
}
client家族属性
clientWidth:
内容区域宽度(宽+padding)clientHeight
:内容区域的高度(高+padding)clientTop:
上边框的宽度clientLef
t:左边框的宽度获得页面的内容区域
:
<script>
// 1. 通过body来获取内容区域
// console.log(document.body.clientWidth);
// 2. 通过html获得内容区域
// console.log(document.documentElement.clientWidth);
// 3. window
// console.log(window.innerWidth);
// 兼容
function getClient() {
return {
clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
clientHeight:window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight || 0
}
}
console.log(getClient());
</script>
事件
关于事件实际上我们已经初步接触过了,指的就是用户与浏览器交互的一瞬间。
我们通过为指定事件绑定回调函数的形式来处理事件,当指定事件触发以后我们的回调函数就会被调用,这样我们的页面就可以完成和用户的交互了。
事件对象
事件对象: 不管是哪个事件被触发,都会产生事件对象,里面保存了一些与事件触发相关的信息
<!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>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box');
// 设置点击事件
// 如何获得事件对象
box.onclick = function (e) {
// 简单兼容: ew
e = window.event || e;
console.log(e);
}
box.onmouseover = function (e) {
e = window.event || e;
console.log(e);
}
box.onmouseout = function (e) {
e = window.event || e;
console.log(e);
}
</script>
</body>
</html>
事件对象中的三个坐标
clientX
:鼠标相对于浏览器(这里指浏览器的有效区域)左上角的x轴坐标;不随滚动条的滚动而改变clientY
:鼠标相对于浏览器(这里指浏览器的有效区域)左上角的y轴坐标;不随滚动条的滚动而改变pageX
:鼠标相对于浏览器 (这里指浏览器的有效区域)左上角的x轴坐标;随滚动条的滚动而改变pageY
:鼠标相对于浏览器(这里指浏览器的有效区域)左上角的y轴坐标;随滚动条的滚动而改变screenX
: 鼠标相对于显示器屏幕左上角x轴的坐标screenY
:鼠标相对于显示器左上角y轴的坐标- 鼠标拖拽案例
<!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>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script>
let box = document.getElementById('box');
// 鼠标按住事件/按下事件
// onmousedown
box.onmousedown = function(e) {
e = window.event || e;
// 获得鼠标在盒子中的坐标
let pointX = e.pageX - box.offsetLeft;
let pointY = e.pageY - box.offsetTop;
//给页面设置鼠标移动事件
window.onmousemove = function (e) {
e = window.event || e;
// 计算盒子的位移坐标
let boxX = e.pageX - pointX;
let boxY = e.pageY - pointY;
// 限制位移的最大值与最小值
// 限制最小值:0
boxX = boxX < 0 ? 0 : boxX;
boxY = boxY < 0 ? 0 : boxY;
// 限制最大值: 页面的宽高 - 盒子的宽高
boxX = boxX > (window.innerWidth - box.offsetWidth) ? (window.innerWidth - box.offsetWidth) : boxX;
boxY = boxY > (window.innerHeight - box.offsetHeight) ? (window.innerHeight - box.offsetHeight) : boxY;
box.style.left = boxX + 'px';
box.style.top = boxY + 'px';
}
}
// 鼠标弹起事件
box.onmouseup = function () {
window.onmousemove = null;
}
</script>
事件注册的方法
- 利用on关键字来注册事件(一个元素不能有多个点击事件)
box.onclick = function () {
console.log('测试 ');
}
box.onclick = function () {
console.log('文字');
}
//只打印后面这个
- 利用
addEventListener()
设置事件监听器注册事件
这个方法需要两个参数:一个是事件字符串,
一个是响应函数。
ps:ie8以下的浏览器是不支持上边的方法的,需要使用attachEvent代替。
btn.addEventListener('click' , function(){alert("hello");});
移除事件的方法
- 利用on关键字,赋值为null清空事件
btn.onclick = function () {
console.log('我被调用了');
// 利用赋值null来清空点击事件
btn.onclick = null;
}
- 使用
removeEventListener()
和detachEvent()
移除事件。
function fun() {
console.log('我也被调用了');
// 点击之后,移除事件
// remove
btn.removeEventListener('click', fun, false);
}
btn.addEventListener('click', fun, false);
事件源
- 通过this,谁调用就指向谁
- e.target
<script>
let liArr = document.getElementsByTagName('li');
// 给每个li标签设置点击事件
for(let i = 0;i < liArr.length;i++) {
liArr[i].onclick = function (e){
e = window.event || e;
console.log('啊,我被点击了');
// 点击的时候,到底谁触发了事件
//this--->谁调就指向谁
// console.log(this);
// 事件源--->触发事件的源头
console.log(e.target);
}
}
</script>
事件冒泡机制:
如果一个元素的某个事件被触发,那么它所有的父级元素相同的事件也会被触发
事件冒泡,从内到外,从小到大
on关键字注册的事件,默认就是冒泡机制
addEventListener(事件字符串,响应函数,参数)
addEventListener(事件字符串,响应函数,false)
:冒泡阶段
addEventListener(事件字符串,响应函数,false)
:捕获阶段