<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body, div {
padding: 0px;
margin: 0px;
} #div1 {
width: 100px;
height: 100px;
background: #000000;
padding: 50px;
border: 20px solid red;
margin: 30px;
float: right;
} #p1 {
width: 300px;
height: 100px;
background: #ababab;
padding: 50px;
border: 20px solid red;
margin: 30px;
float: right;
clear: both;
} #inner {
width: 100px;
height: 100px;
background: yellow;
float: right;
} #p2 {
width: 300px;
height: 100px;
background: #ababab;
padding: 50px;
border: 20px solid red;
/*margin: 30px;*/
position: absolute;
left: 100px;
top: 100px;
clear: both;
} #inner2 {
width: 100px;
height: 100px;
background: gray;
float: right;
}
</style>
</head>
<body>
<div id="div1"> </div>
<div id="p1">
<div id="inner"></div>
</div>
<div id="p2">
<div id="inner2"></div>
</div>
<script src="../Script/jquery-2.1.1.js"></script>
<script type="text/javascript">
//算出偏移量,首先选参照物
//产生偏移量 margin,float,position长长的标准留逻辑
//parentNode和offsetParent不一定是一码事,;不过,标准流,他们的offsetParent都是body,除非他的父元素做了定位(相对或者绝对 ==relative 和absoulte)
var oDiv = document.getElementById('div1');
var ch = oDiv.offsetLeft;//距离盒子的边框外侧;浮动也会产生偏移量
console.log(ch); var parent = oDiv.offsetParent;
console.log(parent);
console.log(parent.offsetLeft);
var oInner = document.getElementById('inner');
console.log(oInner.offsetLeft);
console.log(oInner.offsetParent);//
console.log(oInner.parentNode); var oInner2 = document.getElementById('inner2');
console.log(oInner2.offsetLeft);
console.log(oInner2.offsetParent);

  

    </script>
</body>
</html>

  

//计算ele这个元素距离浏览最左和上边的偏移量
function offset(ele) {
var l = ele.offsetLeft;
var t = ele.offsetTop;
//l += ele.offsetParent.offsetLeft;
//t += ele.offsetParent.offsetTop;
var p = ele.offsetParent;
while (p) {
l += p.offsetLeft;
t += p.offsetTop;
p = p.offsetParent;
}
return { top:t,left:l }
}

  

Javascript offsetLeft详情的更多相关文章

  1. JavaScript美术馆进化史

    内容选自<<JavaScript DOM 编程艺术>>第4-6章,跟着作者一起见证美术馆的进化吧. 先放效果图,然后一步步做出每个效果.每个效果都有它实用的地方,且知道过程可以 ...

  2. 按照vue文档使用JavaScript钩子但是却不能执行动画?

    大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 ---------  JavaScript钩子 详情见vue文档:  https://cn.vuejs.or ...

  3. JavaScript小记

    JavaScript小记 1. 简介 1. 语言描述 JavaScript 是一门跨平台.面向对象的弱类型动态脚本编程语言 JavaScript 是一门基于原型.函数先行的语言 JavaScript ...

  4. CKPlayer从Cookie里读取上次播放记录的一个demo

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  5. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  6. jq 操作表单中 checkbox 全选 单选

    知识点: Note: 1: .prop() 和 .attr() 方法的区别 .prop() 针对标签既有属性 .attr() 针对自定义属性 2: $('input:checked')即为选中元素. ...

  7. wpgcms---详情页面数据怎么渲染

    wpgcms的详情页面的数据会被保存在 contentInfo 这么一个字段里面. 面包屑导航调用: <p>当前位置 {% for c in crumb|slice(1, crumb|le ...

  8. 给Jquery easyui 的datagrid 每行添加操作链接

    背景 我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...

  9. 2019-09-17 thinkphp网页静态化

    public function details(){ $pid = I('get.goods_id'); $filename = "details_".$pid.".ht ...

随机推荐

  1. Oracle private dblink和pubic dblink

    DB : 11.2.0.3.0 Oracle DBLINK 创建分为private 和 public dblink,默认创建的为private ; private dblink 只有创建的schema ...

  2. AppCan移动平台,开发者是这样用的……

    随着生活节奏的加快,每天各种压力山大,难免产生心理问题.然而穷的都要吃土了,又不想面对陌生人,怎么办? 近日,AppCan开发者樊星阳“一夜爆红”,引起猎云网的持续关注.起因是这样的,樊星阳利用App ...

  3. hdu 5427 A problem of sorting

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5427 A problem of sorting Description There are many ...

  4. UIImagePickerController之Block回调

    方法使用:引入头文件 #import "UIImagePickerController+Block.h" 我这拖出来的两个属性 @property (weak, nonatomic ...

  5. xcode 产生指定颜色的图片imageWithColor

    是在万能的stackOverflow上找到的答案,留下了, 原地址:http://stackoverflow.com/questions/6496441/creating-a-uiimage-from ...

  6. Linq之查询表达式语法详解

    1.闲言碎语 由于项目的需要接触到Linq,刚开始有些不适应,好多概念都很模糊.不过经过一段时间的摸索,慢慢地对Linq有了一个更加深入的了解.在此记录一下备忘.      2.查询表达式语法 执行L ...

  7. 新手学Android

    Eclipse平台下的新手Android学习记录. 1.打开一个本地的项目 在Project Explorer右键->Import->Existing Projects into Work ...

  8. XAML中的Path

    利用Path创建图形的时候,如果path对象的Fill属性不设置,那么绘制出来的图形首尾是不连接的. 如果设置了Fill属性,当Fill的Color属性为Transparent时,图形也不会首尾连接: ...

  9. N!大整数阶乘问题

    问题:求N!阶乘,1<=N<10000 思路:windows下面visual 6.0中c一个整型占4个字节(自己可以try一下,printf("%d", sizeof( ...

  10. LintCode-BackPack II

    Given n items with size A[i] and value V[i], and a backpack with size m. What's the maximum value ca ...