<!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. ASP.NET内置对象之Request传递请求对象

    Request对象是HttpRequest类的一个实例,Request对象用于读取客户端在Web请求期间发送的HTTP值.Request对象常用的属性如下所示. q      QueryString: ...

  2. Android线程---UI线程和非UI线程之间通信

        近期自学到了线程这一块,用了一上午的时间终于搞出来了主.子线程间的相互通信.当主线程sendMessage后,子线程便会调用handleMessage来获取你所发送的Message.我的主线程 ...

  3. hdu 1053 Entropy

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1053 Entropy Description An entropy encoder is a data ...

  4. android开发系列之git常用命令

    最近因为跳槽到新公司,然后新公司里面的代码管理工具是gitLab,所以我想在这篇博客里面整理一下git常用的语法. GitLab是利用 Ruby on Rails 一个开源的版本管理系统,实现一个自托 ...

  5. MVC4.0 WebApi如何自定义返回数据类型

    1.客户端可以通过HTTP Accept消息头来通知服务器客户端想要什么样的MIME类型数据,例如:application/json则代表告诉服务器想要的是Json数据 2.服务器端撇开客户端的请求类 ...

  6. ubuntu14.04建立交叉编译环境, 注意事项

    ubuntu14.04建立交叉编译环境, 注意事项 ~$ arm-linux-gcc/opt/FriendlyARM/toolschain/4.4.3/bin/arm-linux-gcc: 15: e ...

  7. 可综合风格的VerilogHDL模块实例

    1.赋值语句:assign{cout,sum}=a+b+cin; 2.利用电平敏感的always块设计组合逻辑电路 3.always块中如果含有局部变量,就必须在begin后加模块名,是必须加,同样的 ...

  8. shell if判断的种类

    if [ $# != 1 ] ; then echo "USAGE: $0 TABNAME" echo " e.g.: $0 CDR_CALL_20040701" ...

  9. 查看linux命令类型

    type type -a type type是内建变量 root@akayer-p6:~# type -a lsls 是 `ls --color=auto' 的别名ls 是 /bin/ls

  10. HSSF，XSSF和SXSSF的区别

    HSSF是POI工程对Excel 97(-2007)文件操作的纯Java实现 XSSF是POI工程对Excel 2007 OOXML (.xlsx)文件操作的纯Java实现 从POI 3.8版本开始, ...