js原生offsetParent解析

offsetParent是个只读属性，返回最近显示指定位置的容器元素的引用。如果元素没有指定位置，最近的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。当元素的style.display='none'时，offsetParent返回null。由于offsetTop和offsetLeft是相对于页边距，因此offsetParent是非常有用的。

浏览器兼容性

在以WebKit为核心的浏览器上，如果元素是隐藏的（该元素或者上级元素style.display='none'）或者元素自身style.position='fixed'，那么就会返回null。

在IE（9）上如元素style.position='fixed'，该属性就会返回null。（然而display:none不影响这个浏览器）

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html;charset=UTF-8"/><title>offsetParent属性</title><style type="text/css">div {margin: 5px;}#div11 {border: 2px solid #0000ff;}#div21 {position: relative;border: 2px solid #ffff00;}#div30 {position: relative;border: 2px solid red;}#div31 {}</style><script type="text/javascript">function initPage() {getOffsetParent('div12'); //BODYgetOffsetParent('div22');//DIVgetOffsetParent('div32');//BODY}function getOffsetParent(id) {var divEl = document.getElementById(id);var el = divEl.offsetParent;console.log(el.nodeName);console.log('element id is ' + el.getAttribute('id') || '');}</script>
</head>
<body οnlοad="initPage()">
<div id="div11"><div id="div12">测试1</div>
</div>
<div id="div21"><div id="div22">测试2</div>
</div>
<div id="div30"><div id="div31"><div id="div32">测试3</div></div>
</div>
</body>
</html>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetParent

js原生offsetParent解析相关推荐

狼叔直播 Reaction《学习指北：Node.js 2022 全解析》
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan02 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
api怎么写_使用Node.js原生API写一个web服务器
Node.js是JavaScript基础上发展起来的语言,所以前端开发者应该天生就会一点.一般我们会用它来做CLI工具或者Web服务器,做Web服务器也有很多成熟的框架,比如Express和Koa.但 ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
php 读取 js json格式数据,js读取和解析JSON数据的方法
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
js简单遍历解析json字符串
js简单遍历解析json字符串前两天接触到前台的json字符串遍历拼接于是就翻了一些资料总结了一下遍历取值的方法,如有不对请指正,感谢阅读!! 先上json串 { "list": ...
JS/JavaScript中解析JSON --- JSON.parse()、JSON.stringify()以及$.parseJSON()使用详解
JS/JavaScript中解析JSON --- JSON.parse().JSON.stringify()以及$.parseJSON()使用详解现在JSON格式在web开发中非常重要,特别是在使用 ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
一段代码看出JS的的解析到执行的顺序规则
一段代码看出JS的的解析到执行的顺序规则代码 function bar(a, b) {b = 3;var b;function b(){}console.log(a); // 打印出:10conso ...

js原生offsetParent解析

js原生offsetParent解析相关推荐

最新文章

热门文章