<!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. 内核同步机制 RCU

    Evernote分享地址:http://www.evernote.com/shard/s133/sh/8807320d-f54d-4e90-a31b-e2a3d35509ee/7539dc3931b8 ...

  2. DB2建立不记录日志的表

    )); ,'JACK'); ,'Timo'); -----建立无日日志表 --方法一:(表存在) CREATE TABLE TB_7 LIKE TB_6 NOT LOGGED INITIALLY; - ...

  3. ios学习笔记之block在ios开发中的应用

    一.什么是Blocks      Block是一个C级别的语法以及运行时的一个特性,和标准C中的函数(函数指针)类似,但是其运行需要编译器和运行时支持,从ios4.0开始就很好的支持Block. 二. ...

  4. 自学asp.net mvc(一)

    之前一直做asp.net的webform,现在想学习一下mvc,把自学中遇到的问题记录到博客. 一.codeplex上托管代码 1. 2. 3. 4. 5. 6. 7. 8. 9.

  5. python实现树莓派生成并识别二维码

    python实现树莓派生成并识别二维码 参考来源:http://blog.csdn.net/Burgess_Liu/article/details/40397803 设备及环境 树莓派2代 官方系统R ...

  6. Labview实现脉波调制( PDM )

    Labview实现脉波调制( PDM ) 根据定义为脉冲宽度调制 生成一个正弦信号,得到其幅值输入给一个方波信号的占空比 由于方波信号的占空比里面含有正弦信号的信息 因此通过滤出方波信号的占空比信息则 ...

  7. 微软职位内部推荐-Senior Development Lead

    微软近期Open的职位: MSIT Dynamics CRM Sr. Dev Lead (Sr. Dev Lead, Microsoft China, Beijing) Are you interes ...

  8. Valid Palindrome

    leetcode:https://oj.leetcode.com/problems/ 今天A了一个Easy类型的,主要是判断一个字符串是否是回文.东平西凑的还是给弄好了,具体可看下面的要求,或者直接去 ...

  9. svg绘制蓝色星空，月亮，旋转灯塔

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  10. C语言面向对象风格编程

    前言 本文略谈C面向对象风格编程,如何使用过程式语言去模拟面向对象的特性?C面向对象的方式和形式很多,不一而足,本文的代码形式是模拟部分C++面向对象关键词并赋予其特性,这种方式对于初级程序员比较好理 ...