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语言家族 ...
随机推荐
- 题解报告：poj 3233 Matrix Power Series（矩阵快速幂）
题目链接:http://poj.org/problem?id=3233 Description Given a n × n matrix A and a positive integer k, fin ...
- ［LeetCode］152. Maximum Product Subarray
This a task that asks u to compute the maximum product from a continue subarray. However, you need t ...
- 【转】Java 集合系列09之 Map架构
概要 前面,我们已经系统的对List进行了学习.接下来,我们先学习Map,然后再学习Set:因为Set的实现类都是基于Map来实现的(如,HashSet是通过HashMap实现的,TreeSet是通过 ...
- 客户端通过base64上传bitmap服务器
首先致谢:http://www.jb51.net/article/129743.htm 咱们不是代码的生产者,只是代码的搬运工. 场景描述:Android客户端需要上传头像等图片到服务器,经双方协商决 ...
- Android 6.0 如何添加完整的系统服务(app-framework-kernel)
最近学习了如何在Android 6.0上添加一个系统服务,APP如何通过新增的系统服务访问底层驱动.在这学习过程中,收获颇多,并结合学习了<Embeded Android>--Karim ...
- JS高级——逻辑中断
1.表达式1||表达式2:表达式1为真,返回表达式1:表达式1为假,返回表达式2 2.表达式1&&表达2:表达式1为真,返回表达式2:表达式1为假,返回表达式1
- javascript之console篇
javascript中的console使用得当,将会事半功倍,对bug,性能等的跟踪,优化是个不错的利器! 1.基本日志消息打印: console.debug(msg); console.info() ...
- windows远程桌面连接
服务器端: 1.我的电脑->管理->本地用户和组->用户->新建用户设置账号密码,隶属于administrator和remote user 2.我的电脑->属性-> ...
- 常见Android安装启动失败问题
1.INSTALL_FAILED_VERSION_DOWNGRADE版本过低2.Failed to install Funm_AND.apk on device 'QWOJLVR8KNHYA6NR': ...
- centos添加永久的环境变量
cd /etc/profile.d/ 创建一个sh文件 vi dotnetpath.sh 内容如下: export PATH=$PATH:/opt/dotnet 保存,重启,这就有了一个永久的环境变量