javascript dom元素位置相关方法

作者: EdmundChen | 来源:发表于2017-01-12 15:43 被阅读40次

javascript dom元素位置相关方法
DOM (javascript DOM节点操作)
2019-03-25第4,5次课武JavaScript对象
专辑篇:JS HTML DOM
HTML DOM 方法&属性
JavaScript入门篇
拖拽排序、添加、移除
02-JQuery操作DOM
学习主题计划
HTML DOM 事件

获取dom元素的位置

function offset(el) {
  const rect = el.getBoundingClientRect();
  return {
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft,
  };
}

获取viewport的高度,宽度

浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，

Window.innerHeight
window.innerWidth

判断一个dom元素是否在viewport内

ele.getBoundingClientRect().top > window.innerHeight // 元素在当前屏下面

ele.getBoundingClientRect().bottom < 0 // 元素在当前屏上面

javascript dom元素位置相关方法
获取dom元素的位置获取viewport的高度,宽度浏览器窗口的视口（viewport）高度（以像素为单位），...
DOM (javascript DOM节点操作)
DOM (javascript DOM节点操作) 本节目录查找DOM元素 DOM节点操作 javascript操...
2019-03-25第4,5次课武JavaScript对象
JavaScript对象本章目标(1) . 会使用getElementById( )方法访问DOM元素(2) ...
专辑篇:JS HTML DOM
JavaScript HTML DOM 通过HTML DOM,可以访问JavaScript HTML文档的所有元素...
HTML DOM 方法&属性
HTML DOM 方法方法：我们可以在节点（HTML 元素）上执行的动作编程接口可通过 JavaScript...
JavaScript入门篇
快速认识JavaScript熟悉JavaScript基本语法窗口交互方法通过DOM进行网页元素的操作学会如何编写J...
拖拽排序、添加、移除
根据dom元素位置根据鼠标位置
02-JQuery操作DOM
一、JS获取DOM元素和JQuery获取DOM元素的区别 JavaScript获取的是DOM对象，而Jquery获...
学习主题计划
2017.03.13-2017.03.19学习计划学习javascript DOM操作的相关知识，学习方法可自行...
HTML DOM 事件
HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中...