上网找了好久没有找到一个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在各浏览器的值的更多相关文章

  1. Python爬虫教程-10-UserAgent和常见浏览器UA值

    Python爬虫教程-10-UserAgent和常见浏览器UA值 有时候使用爬虫会被网站封了IP,所以需要去模拟浏览器,隐藏用户身份, UserAgent 包含浏览器信息,用户身份,设备系统信息 Us ...

  2. 用file上传文件时,浏览器返回值总是自动添加<pre>的解决办法

    在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"ok",在浏览器里面就变成了"<pre style="word- ...

  3. S 导入值列表浏览器、值列表

    先导入值列表浏览器,再导入值列表 一.导出模板 上面为导出模板 二.导入值列表浏览器 下面开始导入EXCEL数据 List Of Values Parent(1).xls List Of Values ...

  4. IE9或以上的浏览器flash值为空时,导致domready不触发

    在前些时间开发中遇到一个问题当flash值<param name="movie" value=""/>为空时,IE版本>=9不会触发domre ...

  5. 各种浏览器UA值

    UA  User-Agent:用户代理,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器引擎.浏览器语言.浏览器插件等. 标准格式为: 浏览器标识 ...

  6. 关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)

    三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 ...

  7. offsetleft、offsetTop、offsetParent的兼容性问题

    先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...

  8. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  9. Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理

    浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...

随机推荐

  1. Java中的迭代迭代器Iterator与枚举器Enumeration

    Iterator 和 Enumeration区别 Iterator 和 Eumberation都是Collection集合的遍历接口,我们先看下他们的源码接口 package java.util; p ...

  2. POJ - 1321 棋盘问题 【DFS】

    题目链接 http://poj.org/problem?id=1321 思路 和N皇后问题类似 但是有一点不同的是 这个是只需要摆放K个棋子就可以了 所以 我们要做好 两个出口 并且要持续往下一层找 ...

  3. 《机器学习实战》学习笔记第二章 —— K-近邻算法

    主要内容: 一.算法概述 二.距离度量 三.k值的选择 四.分类决策规则 五.利用KNN对约会对象进行分类 六.利用KNN构建手写识别系统 七.KNN之线性扫描法的不足 八.KD树 一.算法概述 1. ...

  4. visual studio for mac 安装文件

    安装步骤参考: http://jingyan.baidu.com/article/00a07f3869b81082d028dca8.html 所需安装文件:[注 我只下载了javajdk, 需要and ...

  5. Codeforces 854B Maxim Buys an Apartment:贪心

    题目链接:http://codeforces.com/contest/854/problem/B 题意: 有n栋房子从1到n排成一排,有k栋房子已经被售出. 现在你要买一栋“好房子”. 一栋房子是“好 ...

  6. 使用同一个目的port的p2p协议传输的tcp流特征相似度计算

    结论: (1)使用同一个目的port的p2p协议传输的tcp流特征相似度高达99%.如果他们是cc通信,那么应该都算在一起,反之就都不是cc通信流. (2)使用不同目的端口的p2p协议传输的tcp流相 ...

  7. HTml js 生成图片

    <script type="text/javascript"> function $(id) { return document.getElementById(id); ...

  8. 从结果推断过程----->使用System.out和Root Device

    刚才解决了一个App中更新的逻辑问题.出问题之后发现,有很多处调用了更新,后来都不知道是哪里改写了SharedPreferences. 然后一直在挨个寻找每一处更新的地方,花了很多时间. 最后直接使用 ...

  9. ACM学习历程——POJ 1700 Crossing River(贪心)

    Description A group of N people wishes to go across a river with only one boat, which can at most ca ...

  10. Eclipse设置:背景与字体大小、xml文件中字体大小调整和自动提示 SVN插件安装

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...