原生js的offset***方法

c.offsetLeft 和 c.offsetTop

一般指当前元素的CSS边框相对于其offsetParent的X和Y坐标
c.offsetHeight 和 c.offsetWidth

当前元素及其所有内容的高度，宽度。
c.offsetParent

大多数元素都的都是指<body>

参考《javascript权威指南第六版》第892页

var c = document.getElementsByName("div")[0];c.offsetLeft
c.offsetTop
c.offsetParent
c.offsetHeight
c.offsetWidth

Jquery offset()方法

Jquery已经提供了该方法：

let offset = $(".class").offset()

返回值offset是一个对象：

{top:100left:100
}

表示从当前元素到屏幕边界的距离，单位是px.

用途

在实现屏幕坐标系时很有用，如下图：每个交叉点要可点，并且整个网格可以拖动到屏幕不同地方，并且要视频不同分辨率的屏幕

参考：

offsetLeft,Left,clientLeft的区别

Box Dimensions

HTMLElement.offsetLeft

DOM Element对象的offsetXXX方法相关推荐

html dom getattribute,DOM Element对象getAttribute()方法
DOM Element对象getAttribute()方法用于获取属性的值(如果属性存在于指定元素). 语法以下是getAttribute()方法的使用语法. elementObj.getAttri ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
HTML DOM Element 对象
TML DOM 节点在 HTML DOM (文档对象模型)中,每个部分都是节点: 文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点 ...
DOM Element对象参考手册
HTML DOM 节点在 HTML DOM (Document Object Model) 中, 每个东西都是节点 : 文档本身就是一个文档对象所有 HTML 元素都是元素节点所有 HTML ...
python 爬虫（七）lxml模块 + lxml数据提取（字符串的xml/html文件--转换--element对象--转换--字符串）调用XPath方法筛选数据 + 案例（扇贝酷狗网易云音乐）
爬虫小知识:爬取网站流程确定网站哪个url是数据的来源. 简要分析一下网站结构,查看数据一般放在哪里. 查看是否有分页,解决分页的问题. 发送请求,查看response.text里面是否有我们想要的 ...
js DOM Element属性和方法整理
js DOM Element属性和方法整理节点操作,属性 1. childNodes.children 这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1. ...
前端：JS/27/HTML DOM简介和新特性，HTML DOM访问HTML元素的方法，元素对象的属性（标准属性），noscroll事件，实例：书讯快递
HTML DOM简介和新特性 1,HTML DOM简介核心DOM中,提供的属性和方法,已经可以操作网页了,为什么还要HTML DOM? 如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分 ...
DOM对象转化成jQuery对象 $(参数) (能不能查到jQuery对象的所有方法)
相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象.$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用. 如果传递给$(DOM)函数的参数是一个DO ...
Element 对象表示 XML 文档中的元素。
Element 对象 Element 对象表示 XML 文档中的元素.元素可包含属性.其他元素或文本.如果元素含有文本,则在文本节点中表示该文本. 重要事项:文本永远存储在文本节点中.在 DOM 处理 ...

DOM Element对象的offsetXXX方法

原生js的offset***方法

Jquery offset()方法

用途

参考：

DOM Element对象的offsetXXX方法相关推荐

最新文章

热门文章