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语言家族 ...
随机推荐
- 【Codeforces866E_CF866E】Hex Dyslexia（Structure & DP）
It's my first time to write a blog in EnglishChinglish, so it may be full of mistakes in grammar. Pr ...
- 6.11---swagger文件上传的写法【照着写就行了，主要是需要声明contentType未mutilpart---如果不设置这个，就无法识别文件的】
MultipartFile 是直接接收前台传过来的文件,File是抽象出来的文件对象,用来表示文件,一般操作都是操作的File,所以需要将MultipartFile转为File controller写 ...
- 如何学习Unity3D
如何学习 第一步首先了解unity3d的菜单,视图界面.这些事最基本的基础,可以像学word操作一样,大致能明白有几个菜单,几个基本的视图,各自起什么作用的就可以了. 第二步理解场景里面的坐标系统 ...
- jQuery——插件制作
1.$.fn.extend:扩展 jQuery 元素集来提供新的方法(通常用来制作插件),使用时是$('选择器').方法 2.$.extend:扩展jQuery对象本身,用来在jQuery命名空间上增 ...
- html5——动画
基本介绍 /*执行函数gun,执行时间,重复执行,反向执行,匀速执行,延迟执行时间*/ animation: gun 4s infinite alternate linear 5s; 动画序列 1.g ...
- codeforces_731D_（前缀和）（树状数组）
D. 80-th Level Archeology time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- 太坑了，mybatis注解一对多，id没了
@Select("SELECT *, id nodes FROM QUESTION_PO WHERE ID=#{id}") @Results({ @Result(property ...
- jinkins配置python虚拟环境
cd /root/.virtualenvs . automationVenv/bin/activate cd /home/wangju/gitProject/automationtest#cd pyt ...
- 强大而优雅，API 研发管理 EOLINKER 新版正式发布！
EOLINKER 于2019年3月3日正式发布新版本!该版本大幅强化各个产品的功能.着重优化了全站的用户交互体验,并且EOLINKER AMS 产品正式更名为 EOLINKER API Studio ...
- P1002 过河卒 【递推、简单动规】
题目描述 棋盘上AA点有一个过河卒,需要走到目标BB点.卒行走的规则:可以向下.或者向右.同时在棋盘上CC点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒 ...