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语言家族 ...
随机推荐
- Android App签名(为apk签名)
最近有朋友问到 android 签名的问题,所以转一篇给大家分享: 这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1.签名的意义 为了保证每个应用程序开 ...
- kubernetes installing and using 单机版
centos安装docker uname -r yum remove docker \ docker-client \ docker-client-latest \ docker-common \ d ...
- vue-clickoutside d
js文件 export default { bind(el, binding, vnode) { function documentHandler(e) { if (el.contains(e.tar ...
- DeadObjectException
开发的过程中有时候会遇到DeadObjectException,说明系统service已经停止运行,解决的方式是在mainfistxml的application标签中添加android:hardwar ...
- JS——tab函数封装
1.为li标签添加index属性,这个属性正好就是span标签数组的index值 2.函数封装适合页面有多个tab切换,需要注意的在获取的li标签和span标签对象时,必须将对应div对象作为参数传入 ...
- C#——枚举格式转换与比较
定义一个枚举类型: public enum City { 北京, 上海, 广州 } 控制台判断: static void Main(string[] args) { Console.WriteLine ...
- 将vim的UltiSnips的快捷键彻底从tab键中分离
在我之前的<<vim之补全1>>和<<vim之补全2>>中曾经成功的将vim的supertab和UltiSnips共用一个tab键, 这样做的优点的两种 ...
- 本地文件与服务器文件同步shell脚本
为何创建此脚本是因为方便项目的布署,不需要手动地去同步不同的项目,而只需要简单的执行shell脚本,输入项目名就能发布到服器上. 1.shell文件代码 #!/bin/sh read -t 30 -p ...
- js中数组，字符串，对象常用方法总结
时间对象方法 获取当前时间的毫秒数 1.var timestamp = Date.parse(new Date()); 2.var timestamp = (new Date()).valueOf() ...
- HDU114 - Piggy-Bank 【完全背包】
在 ACM 能够开展之前,必须准备预算,并获得必要的财力支持.该活动的主要收入来自于 Irreversibly Bound Money (IBM).思路很简单.任何时候,某位 ACM 会员有少量的钱时 ...