锐客网

  1. 首页 > it技术 > >

2021-05-23|2021-05-23 做游戏 必须精通的元素标签

元素偏移量offset系列 1.1offset概述
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
获得元素的距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意： 返回的数值都不带单位


2021-05-23|2021-05-23 做游戏 必须精通的元素标签
文章图片
1.2offset 与 style 区别

offset offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适


style style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border 的值
style.width 是可读写属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变


1.3元素可视区 client 系列 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等
2021-05-23|2021-05-23 做游戏 必须精通的元素标签
文章图片
1.4元素滚动 scroll 系列 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。


2021-05-23|2021-05-23 做游戏 必须精通的元素标签
文章图片
1.offset系列 经常用于获得元素位置offsetLeftoffsetTop
2.client经常用于获取元素大小clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTopscrollLeft
4.注意页面滚动的距离通过 window.pageXOffset获得


1.5. mouseenter 和mouseover的区别
- 当鼠标移动到元素上时就会触发mouseenter 事件
- 类似 mouseover，它们两者之间的差别是
【2021-05-23|2021-05-23 做游戏 必须精通的元素标签】- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发
- 之所以这样，就是因为mouseenter不会冒泡
- 跟mouseenter搭配鼠标离开 mouseleave同样不会冒泡


function animate(obj, target) {
// 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
// 解决方案就是 让我们元素只有一个定时器执行
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if (obj.offsetLeft >= target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
}, 30);
}

    推荐阅读


    上一篇：每逢聚会，都是被peer|每逢聚会，都是被peer pressure碾压的一天

    下一篇：2021-05-11