js原生offsetParent解析
假设元素没有指定位置，近期的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。
当元素的style.display='none'时。offsetParent返回null。
因为offsetTop和offsetLeft是相对于页边距，因此offsetParent是很实用的。
<!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'); //BODY
getOffsetParent('div22');//DIV
getOffsetParent('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 onload="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>
js原生offsetParent解析的更多相关文章
- js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）
js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...
- zepto.js 源码解析
http://www.runoob.com/w3cnote/zepto-js-source-analysis.html Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
- Node.js原生及Express方法实现注册登录原理
由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...
- JS原生Ajax&Jquery的Ajax技术&Json
1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...
- 15、js 原生基础总结
Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...
- underscore.js源码解析（五）—— 完结篇
最近公司各种上线,所以回家略感疲惫就懒得写了,这次我准备把剩下的所有方法全部分析完,可能篇幅过长...那么废话不多说让我们进入正题. 没看过前几篇的可以猛戳这里: underscore.js源码解析( ...
- underscore.js源码解析（二）
前几天我对underscore.js的整体结构做了分析,今天我将针对underscore封装的方法进行具体的分析,代码的一些解释都写在了注释里,那么废话不多说进入今天的正文. 没看过上一篇的可以猛戳这 ...
- JS原生Date类型方法的一些冷知识
ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...
- 问题集录--JS如何处理和解析Json数据
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
随机推荐
- EF--DBFirst
EF框架有三种基本的方式:DB First,Model First,Code First.这里简单的说一下DB First,适合没有基础的同学照着做,学习基础的东西. DatabaseFirst就是围 ...
- android GPS 定位，取位置信息
现在很多app ,需要取位置信息,所以我也做了一个模块用来取位置信息: 加入位置服务所需的权限: <uses-permission android:name="android.pe ...
- Android 签名(5)用命令签名和用android studio,eclipse签名
1,用命令签名 无论用哪个 IDE 开发,最终只是用了 keytool 和 jarsigner 这两个 Java 工具来完成签名任务(在 jdk 的 bin 目录下).其中 keytool 用来生成 ...
- <stddef.h>
Common definitions 定义类型: ptrdiff_t 两指针相减的结果,signed integer size_t sizeof操作符的结果,unsigned integer max_ ...
- git——merge和rebase的区别
参考http://www.jianshu.com/p/129e721adc6e 我在公司里看到其他同事都使用git pull --rebase拉取远程代码,而我总是用git pull,也有同事和我说过 ...
- Unity引擎 UGUI
Unity UGUI讲解 1.导入UI图片资源 2.设置参数: TextureType(纹理类型) 精灵 2D and UI SpriteMode(精灵模式) Single(单) multiple( ...
- Resources.getResourceAsReader 报空指针
1.maven项目中 可能未编译 导致找不到, 解决方法:mvn clean install -DskipTests -X 编译一下项目 2.可能在 Resources.getResourceAs ...
- JS高级——面向对象方式解决tab栏切换问题
注意事项 1.给li元素注册事件,函数里面的this指的li元素,那么我们可以在注册事件之前将Tab对象用that=this进行保存 2.使用沙箱模式,所以暴露给外面的变量使用的是window.tab ...
- Hibernate自动事务揪出的编码不规范
最近重构的项目(Java初学中),Service层一个获取通知记录报错: org.springframework.dao.InvalidDataAccessResourceUsageException ...
- Python虚拟环境和requirements.txt文件的使用
参考: https://www.centos.bz/2018/05/centos-7-4-%E5%AE%89%E8%A3%85python3%E5%8F%8A%E8%99%9A%E6%8B%9F%E7 ...