<!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. 菜鸟学习Hibernate——简单的一个例子

    一.Hibernate开发. 上篇博客已经为大家介绍了持久层框架的发展流程,持久层框架的种类. 为了能够使用Hibernate快速上手,我们先讲解一个简单的Hibernate应用实例hibernate ...

  2. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  3. 分享我常用的一些JS验证和函数

    下面是我常用一些JS验证和函数,有一些验证我直接写到了对象的属性里面了,可以直接通过对象.方法来调用//浮点数除法运算 function fdiv(a, b, n) { if (n == undefi ...

  4. 先登陆面试再者Tabs标签导航，多次网络请求共享cookie，本地存储cookie

    1,index.ng.html: <head> <title>ionic todo example</title> </head> <body n ...

  5. MVC4.0网站发布和部署到IIS7.0上的方法【转：http://www.th7.cn/Program/net/201403/183756.shtml】

    最近在研究MVC4,使用vs2010,开发的站点在发布和部署到iis7上的过程中遇到了很多问题,现在将解决的过程记录下来,以便日后参考,整个过程主要以截图形式呈现 vs2010的安装和mvc4的安装不 ...

  6. json转换对象

    JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符串

  7. 个人软件过程(psp)需求文档

    1.  业务需求 1.1 应用背景 开发软件项目进度计划总是那么不准确,延期经常出现,跟可恨的是甚至无法给出一个相对比较明确的延迟时间.很大 因素在于分配给开发人员的完成时间与开发人员的实际完成时间有 ...

  8. STL学习三：deque容器

    1.Deque简介 deque是“double-ended queue”的缩写,和vector一样都是STL的容器,deque是双端数组,而vector是单端的. deque在接口上和vector非常 ...

  9. cocos2dx 2.0+ 版本，IOS6.0+设置横屏

    使用cocos2dx 自带的xcode模板,是不能正常的设置为横屏的. 一共修改了三个地方: 在项目属性中:Deployment Info中,勾选上 Landscape left,以及 Landsca ...

  10. 20145120 《Java程序设计》实验四实验报告

    20145120 <Java程序设计>实验四实验报告 实验名称:Android开发基础 实验目的与要求: 用SDK成功编译出HelloWorld 实验内容.步骤 PSP 步骤 耗时 百分比 ...