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语言家族 ...
随机推荐
- websocket的原理
首先明确几点: 1. websocket是一种协议.是html5的一种新协议: 2. 与http的区别是,它是一种双向通信协议,服务器和客户端都能主动向对方发送或接受数据: 3. websocket需 ...
- python导入包出错：ImportError: No module named XXXXX
python中,每个py文件被称之为模块,每个具有__init__.py文件的目录被称为包.只要模块或者包所在的目录在sys.path中,就可以使用import 模块或import 包来使用. 如果想 ...
- mysql子查询与连接查询
表结构以及数据: CREATE TABLE `student` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) CHARACTER SET utf8 COLLAT ...
- 研磨JavaScript系列（四）：代码的时空
对于过程式编程来说,代码执行的时间与数据标识的空间是密不可分的.我们只有把指令执行的具体时刻与标识映射的具体地址结合起来,才能确定程序在执行瞬间的上下文状态.于是,代码时刻与数据标识的结构,就形成了作 ...
- [ CTSC 2007 / BZOJ 2151 ] Backup / 种树
\(\\\) \(Description\) 给出一个数轴上\(N\)个点的坐标\(A_i\),选择\(K\)个点对,使得这\(K\)个点对每个点对的距离之和尽可能小. \(N\in [0,10^5] ...
- build.gradle（Mdule.app）依赖库相关
dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) //noinspection GradleCompati ...
- 网络中 ping 不通 路由表
不管是在window还是在linux中,我们经常会遇到ping不通的问题. 这里的原因很多,比如不同的网段交换机做了一些限制等,这些问题是我们人工不能解决的. 但是,当你发现各自的网关是可以ping的 ...
- python发送文本邮件
#!/usr/bin/env python #coding=utf-8 #Author: Ca0Gu0 import time import smtplib from email.mime.text ...
- Java中IO对象的输入输出流
输入流: public void inputDemo () throws IOException { //文件名称 String fileName = "d:\\aaa.txt"; ...
- Node.js 命令行程序开发教程 ---------http://www.ruanyifeng.com/blog/2015/05/command-line-with-node.html
五.yargs 模块 shelljs 只解决了如何调用 shell 命令,而 yargs 模块能够解决如何处理命令行参数.它也需要安装. $ npm install --save yargs yarg ...