offsetLeft在各浏览器的值
上网找了好久没有找到一个offsetLeft在各浏览器的值，自己用了一晚上的时间在各浏览器测试出来的offsetLeft的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offsetLeft和offsetTop</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
width: 500px;
height: 200px;
padding: 25px;
margin: 32px;
border: 51px solid yellow;
background: pink;
/* position: absolute; */
/* 108*/
}
#pppd1{
width: 1000px;
padding: 1px;
margin: 3px;
border: 4px solid yellow;
position: absolute;
/* 8 */
}
#ppd1{
width: 1000px;
padding: 11px;
margin: 3px;
border: 4px solid yellow;
/* 18 */
}
#pd1{
width: 10px;
height: 100px;
padding: 1px;
margin: 3px;
border: 6px solid yellow;
background: pink;
/* 10 */
}
#d1{
width: 100px;
height: 200px;
padding: 20px;
margin: 30px;
border: 40px solid skyblue;
background: pink;
}
</style>
</head>
<body>
<div id="pppd1">
<div id="ppd1">
<div id="pd1">
<div id="d1"></div>
</div>
</div>
</div>
</body>
</html>
<script>
var d1 = document.getElementById('d1');
console.log(d1.offsetLeft);
</script>
<!--
ie 6/7 () 无论父级怎么改变offset永远不变
offsetLeft = (父padding-left)+(当margin-left)
---------------------------------------------------------------------------------
父级没有定位且父级是body时
firefox
offsetLeft = (父padding-left)+(父margin-left)+(当margin-left)
ie8/9/10/11 chrome
offsetLeft = (父padding-left)+(父margin-left)+(父border-left)+(当margin-left)
---------------------------------------------------------------------------------
父级没有定位且父级有多层时
ie8/9/10/11 chrome （所有父，包括body）
offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)
firefox （所有父，不包括body）
offsetLeft = (所有父padding-left)+(所有父margin-left)+(所有父border-left)+(当margin-left)+ (body的padding-left)+(body的margin-left)
--------------------------------------------------------------------------------------
父级有定位且定位不是在body
ie8/9/10/11 chrome 和firefox
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到定位时,把定位元素的padding-left相加,最后加上自身元素的margin-left
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)
----------------------------------------------------------------------------------------
父级有定位且定位是了在body
chrome
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-left
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(有定位父border-left)+(当padding-left)
ie8/9/10/11 和firefox 这个和定位不是在body时是一样的
向上取父级,把所有父级元素的padding-left、margin-left、border-left相加，直到的遇到body定位时,把body定位元素的padding-left和border-left相加,最后加上自身元素的margin-lef
offsetLeft = (无定位父padding-left)+(无定位父margin-left)+(无定位父border-left)+(有定位父padding-left)+(当padding-left)
----------------------------------------------------------------------------------------
1级父级有定位且定位不是body
在chrome和firefox下,ie还没有测试
offsetLeft =(当margin-left);
所以可以用这个属性去写滑动的效果
-->
offsetLeft在各浏览器的值的更多相关文章
- Python爬虫教程-10-UserAgent和常见浏览器UA值
Python爬虫教程-10-UserAgent和常见浏览器UA值 有时候使用爬虫会被网站封了IP,所以需要去模拟浏览器,隐藏用户身份, UserAgent 包含浏览器信息,用户身份,设备系统信息 Us ...
- 用file上传文件时，浏览器返回值总是自动添加<pre>的解决办法
在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"ok",在浏览器里面就变成了"<pre style="word- ...
- S 导入值列表浏览器、值列表
先导入值列表浏览器,再导入值列表 一.导出模板 上面为导出模板 二.导入值列表浏览器 下面开始导入EXCEL数据 List Of Values Parent(1).xls List Of Values ...
- IE9或以上的浏览器flash值为空时，导致domready不触发
在前些时间开发中遇到一个问题当flash值<param name="movie" value=""/>为空时,IE版本>=9不会触发domre ...
- 各种浏览器UA值
UA User-Agent:用户代理,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器引擎.浏览器语言.浏览器插件等. 标准格式为: 浏览器标识 ...
- 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)
三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...
- offsetleft、offsetTop、offsetParent的兼容性问题
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
随机推荐
- 我的Android进阶之旅------>Android利用Sensor(传感器)实现水平仪功能的小例
这里介绍的水平仪,指的是比较传统的气泡水平仪,在一个透明圆盘内充满液体,液体中留有一个气泡,当一端翘起时,该气泡就会浮向翘起的一端. 利用方向传感器返回的第一个参数,实现了一个指南针小应用. 我 ...
- Django一对多的创建
1.一对多的应用场景: 例如:创建用户信息时候,需要选择一个用户类型[普通用户][金牌用户][铂金用户]等. 2.方法: class Business(models.Model): buss=mode ...
- PHP接口中的静态变量、常量与类中静态变量、常量的区别
接口: 1 不能够定义静态变量(常量除外) 2 定义的常量 const YOUCONST = VALUE,不能在子类中覆盖,在子类中以 interfaceName::YOUCONST的方式调用 3 不 ...
- Java for LeetCode 082 Remove Duplicates from Sorted List II
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
- ListView多选和单选模式重新整理
超简单的单选和多选ListView 在开发过程中,我们经常会使用ListView去呈现列表数据,比如商品列表,通话记录,联系人列表等等,在一些情况下,我们还需要去选择其中的一些列表数据进行编辑.以前, ...
- PYTHON 爬虫笔记八:利用Requests+正则表达式爬取猫眼电影top100（实战项目一）
利用Requests+正则表达式爬取猫眼电影top100 目标站点分析 流程框架 爬虫实战 使用requests库获取top100首页: import requests def get_one_pag ...
- Mockito @BeforeClass @BeforeMethod @BeforeTest 的生命周期
@BeforeClass---@AfterClass 类实例化前, 被执行, 主要用于设置环境变量等, 与SpringTestContext结合用的时候要注意, 这种情况下@autowire的bean ...
- hdu 6103(Kirinriki)
题目链接:Kirinriki 题目描述: 找两个不重叠的字符串A,B. 使得dis(A,B)<=m;\(dis(A,B)= \sum _{i=0}^{n-1} \left | A_i-B_{n- ...
- Unity 官方自带的例子笔记 - Space Shooter
首先 买过一本叫 Unity3D开发的书,开篇第一个例子就是大家经常碰见的打飞机的例子,写完后我觉得不好玩.后来买了一本 Unity 官方例子说明的书,第一个例子也是打飞机,但是写完后发现蛮酷的,首先 ...
- linux命令学习笔记（33）：df 命令
linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了 多少空间,目前还剩下多少空间等信息. ．命令格式: df [选项] [文件] ．命令 ...