dom位置

网上复制的总结,我复制过来方便自己用的时候找

clientX 鼠标相对于浏览器左上角x轴的坐标; 不随滚动条滚动而改变;
clientY 鼠标相对于浏览器左上角y轴的坐标; 不随滚动条滚动而改变;
pageX 鼠标相对于浏览器左上角x轴的坐标; 随滚动条滚动而改变;
pageY 鼠标相对于浏览器左上角y轴的坐标; 随滚动条滚动而改变;
screenX 鼠标相对于显示器屏幕左上角x轴的坐标;
screenY 鼠标相对于显示器屏幕左上角y轴的坐标;
offsetX 鼠标相对于事件源左上角X轴的坐标;
offsetY 鼠标相对于事件源左上角Y轴的坐标;

 ****** 元素视图属性
     * offsetWidth 水平方向 width + 左右padding + 左右border-width
     * offsetHeight 垂直方向 height + 上下padding + 上下border-width
     * 
     * clientWidth 水平方向 width + 左右padding
     * clientHeight 垂直方向 height + 上下padding
     * 
     * offsetTop 获取当前元素到 定位父节点 的top方向的距离
     * offsetLeft 获取当前元素到 定位父节点 的left方向的距离
     * 
     * scrollWidth 元素内容真实的宽度,内容不超出盒子高度时为盒子的clientWidth
     * scrollHeight 元素内容真实的高度,内容不超出盒子高度时为盒子的clientHeight
     * 
     ****** 元素视图属性结束
     * 
     ****** Window视图属性(低版本IE浏览器[<IE9]不支持)
     * innerWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏) 
     * innerHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏)
     * ***** Window视图属性结束
     * 
     ****** Document文档视图
     * (低版本IE的innerWidth、innerHeight的代替方案)
     * document.documentElement.clientWidth 浏览器窗口可视区宽度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
     * document.documentElement.clientHeight 浏览器窗口可视区高度(不包括浏览器控制台、菜单栏、工具栏、滚动条)
     * 
     * document.documentElement.offsetHeight 获取整个文档的高度(包含body的margin)
     * document.body.offsetHeight 获取整个文档的高度(不包含body的margin)
     * 
     * document.documentElement.scrollTop 返回文档的滚动top方向的距离(当窗口发生滚动时值改变)
     * document.documentElement.scrollLeft 返回文档的滚动left方向的距离(当窗口发生滚动时值改变)
     ****** Document文档视图结束
     * 
     ****** 元素方法
     * 1. getBoundingClientRect() 获取元素到body
     *  bottom: 元素底边(包括border)到可视区最顶部的距离
     *  left: 元素最左边(不包括border)到可视区最左边的距离
     *  right: 元素最右边(包括border)到可视区最左边的距离
     *  top: 元素顶边(不包括border)到可视区最顶部的距离
     *  height: 元素的offsetHeight
     *  width: 元素的offsetWidth
     *  x: 元素左上角的x坐标 
     *  y: 元素左上角的y坐标 
     * 
     * 2. scrollIntoView() 让元素滚动到可视区
     * 
     * ***** 元素方法结束
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果 CSS DOM位置发生了改变,你可以使用 CSS3 动画来为其添加过渡效果。具体实现步骤如下: 1. 设置 CSS3 过渡效果:使用 transition 属性设置过渡效果,其中包括要过渡的属性、持续时间、过渡速度等。 2. 监听 CSS DOM位置变化:通过监听 DOM 元素的位置变化事件,如 MutationObserver,来检测其位置的变化。 3. 添加动画类名:当 DOM 元素的位置发生变化时,为其添加一个动画类名,例如 "animate",来触发过渡效果。 4. 移除动画类名:当过渡效果完成后,移除动画类名,使元素回到正常的样式状态。 示例代码如下: ```html <div class="box">Hello, World!</div> ``` ```css .box { position: relative; left: 0; transition: left 0.5s ease-out; } .box.animate { left: 100px; } ``` ```javascript const box = document.querySelector('.box'); // 创建一个 MutationObserver 实例 const observer = new MutationObserver(() => { // 当 DOM 元素位置发生变化时,添加动画类名 box.classList.add('animate'); // 等待过渡效果完成后,移除动画类名 setTimeout(() => { box.classList.remove('animate'); }, 500); }); // 监听 DOM 元素位置变化 observer.observe(box, { attributes: true }); ``` 在上面的代码中,我们首先定义了一个 CSS3 过渡效果,使元素从左侧移动到右侧。然后使用 MutationObserver 监听 DOM 元素位置变化,当位置变化时,为其添加动画类名 "animate",触发过渡效果。等待过渡效果完成后,移除动画类名,使元素回到正常的样式状态。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值