Dom关于位置和尺寸的api
parentNode 直接父级//和offsetParent不同
inner2.parentNode
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#inner2{
position: absolute;
}
#wrap{
position: relative;
}
</style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2</div>
</div>
</div>
</body>
<script type="text/javascript">
//hmtl css js
window.onload=function(){
//parentNode 直接父级
var inner2 = document.querySelector("#inner2");
console.log(inner2.parentNode.id);
} </script>
</html>
offsetParent
a.有点类型于css中包含块（css中的概念）的概念
b.offsetLeft 和 offsetTop都是参照于offsetParent的内边距边界
c.规则（html和body之间的margin被清除）
本身定位为fiexd，不管你父级有没有定位
存在兼容性问题
火狐的offsetParent --> body
非火狐offsetParent --> null
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{position: absolute;}
#inner1{position: fixed;}
#inner2{position: relative;}
#inner3{position: fixed;} </style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2
<div id="inner3"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
ev||event
鼠标滚轮
事件绑定
offsetParent
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8)) 4*4*8 = 128 本身定位为fixed
==> offsetParent:null（不是火狐）
==> offsetParent:body（火狐） 本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
*/ window.onload=function(){
console.log(inner3.offsetParent)
}
</script>
</html>
测试代码
非fixed
父级没有定位
offsetParent --> body
父级有定位
offsetParent --> 定位父级
fixed 不管你有没有定位都根据body
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{position: absolute;}
#inner1{position: fixed;}
#inner2{position: relative;}
#inner3{position: fixed;} </style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2
<div id="inner3"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
ev||event
鼠标滚轮
事件绑定
offsetParent
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8)) 4*4*8 = 128 本身定位为fixed
==> offsetParent:null（不是火狐）
==> offsetParent:body（火狐） 本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
*/ window.onload=function(){
console.log(inner3.offsetParent)
}
</script>
</html>
<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> html,body{
height: %;
overflow: hidden;
} #wrap{position: absolute;background: pink;left: 100px;top: 50px;}
#inner1{position: fixed;background: deeppink;left: 50px;top: 150px;}
#inner2{position: relative;background: hotpink;left: 80px;top: 70px;}
#inner3{position: fixed;background: yellow;left: 60px;top: 30px;}
div{
width: 200px;
height: 200px;
padding: 50px;
border: 10px solid;
}
</style>
</head>
<body id="body">
<div id="wrap">wrap
<div id="inner1">inner1
<div id="inner2">inner2
<div id="inner3">inner3</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*
*
ev||event
鼠标滚轮
事件绑定
offsetParent
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8)) 4*4*8 = 128 本身定位为fixed
==> offsetParent:null（不是火狐）
offsetTop和offsetLeft也是参照于body的
==> offsetParent:body（火狐） 本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
*/ window.onload=function(){
console.log(inner3.offsetTop,inner3.offsetLeft)
}
</script>
</html>
Dom关于位置和尺寸的api的更多相关文章
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...
- JS中关于位置和尺寸的api
HTMLElement.offsetParent 由于offsetTop 和 offsetLeft 都是相对于 offsetParent 内边距边界的,故offsetParent的意义十分重大.off ...
- DOM元素的位置、尺寸及更多的信息
一.基本概念 document.documentElement是整个DOM树的根节点,对应的元素就是html.下面将其称作根元素或根节点. document.body,对应的元素是body 二.浏览器 ...
- Windows 系统上用 .NET/C# 查找所有窗口，并获得窗口的标题、位置、尺寸、最小化、可见性等各种状态
原文:Windows 系统上用 .NET/C# 查找所有窗口,并获得窗口的标题.位置.尺寸.最小化.可见性等各种状态 在 Windows 应用开发中,如果需要操作其他的窗口,那么可以使用 EnumWi ...
- IOS中调整UI控件位置和尺寸
1.frame(修改位置和尺寸):以父控件左上角为坐标原点,在其父控件中的位置和尺寸. //frame属性中的坐标点不能直接修改 CGRect tempFrame = self.v.frame; // ...
- jQuery 学习笔记（4）（文本值相关方法、操控CSS方法、位置和尺寸方法）
1.文本值相关方法 .html() == .innerHTML $("div").html("<span> ...</span>") / ...
- jacascript DOM节点——节点获取与选择器API
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM 操作必须等待 HTML 加载完毕之后,才可以获取节点:有两种方法: 把 script 标签放到代码 ...
- 根据经纬度获取位置描述：百度API与高德API的区别
百度API 使用百度坐标 1.访问方式一 http://api.map.baidu.com/geocoder/v2/?location=35.063592,118.38513&output=j ...
随机推荐
- Windows7下命令行使用MySQL
我在Win7下安装的MySQL版本是mysql-5.0.22-win32 1.在Win7环境下安装MySQL,关于安装方法可以参考文章: Win7系统安装MySQL5.5.21图解教程.win7安装M ...
- JUC源码分析-线程池篇（三）Timer
JUC源码分析-线程池篇(三)Timer Timer 是 java.util 包提供的一个定时任务调度器,在主线程之外起一个单独的线程执行指定的计划任务,可以指定执行一次或者反复执行多次. 1. Ti ...
- JUC源码分析-集合篇（八）DelayQueue
JUC源码分析-集合篇(八)DelayQueue DelayQueue 是一个支持延时获取元素的无界阻塞队列.队列使用 PriorityQueue 来实现. 队列中的元素必须实现 Delayed 接口 ...
- java-day26
## DOM简单学习:为了满足案例要求 * 功能:控制html文档的内容 * 获取页面标签(元素)对象:Element * document.getElementByI ...
- 关于VS的第一次使用
参考链接:https://blog.csdn.net/qq_36556893/article/details/88605617
- C-Ubuntu中MySQL出现ERROR1698(28000):Access denied for user root@localhost错误解决方法
卸载原先的MySQL,重新安装过程中没有提示设置密码, 当键入命令:mysql -uroot -p; 不知密码是什么,输入主机的密码以及不输入密码,回车后都出现标题错误. 寻找多篇相关博文,验证如下博 ...
- pytest_按标记执行
import pytest@pytest.mark.webtestdef test_send_http(): pass @pytest.mark.apptestdef test_devide(): p ...
- vue与webpack
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...
- js 实现图片懒加载
搬运自其他大神,因为找不到链接了就没放,找到了补上. 个人情况:页面超过一屏,下方是大量图片数据(后台传来的html数据) ,想做到一开始不加载下方图片,滚动到进入可视区再加载图片. html:(需先 ...
- uuencode - 对二进制文件编码
总览 (SYNOPSIS) uuencode [-m] [ file ] name uudecode [-o outfile] [ file ]... 描述 (DESCRIPTION) Uuencod ...