<!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. word超链接显示HYPERLINK

    在word中编辑超链接后显示的并不是正常的超链接 正常的超连接 非正常显示 解决办法: 文件---选项----高级,如下图 将“显示域代码而非值域”前面的勾去掉.

  2. mysql索引合并：一条sql可以使用多个索引

    前言 mysql的索引合并并不是什么新特性.早在mysql5.0版本就已经实现.之所以还写这篇博文,是因为好多人还一直保留着一条sql语句只能使用一个索引的错误观念.本文会通过一些示例来说明如何使用索 ...

  3. oracle - redo 损坏或删除处理方法

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...

  4. hdu 2648 Shopping

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2648 纯暴力的方法T_T... 如下: #include<cstdio> #include ...

  5. iOS学习之UIView

    一.UI编程概述      1.UI的本意是用户界面,是英文User和Interface的缩写.      2.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.      3.软件设计可 ...

  6. 使用Ajax.BeginForm 中需要 上传文件 但 Request.files获取不到

    使用Mvc里的插件jquery.unobtrusive-ajax.min.js 之前一直困在这里,一开始以为添加属性enctype="multipart/form-data"就可以 ...

  7. (转)android Fragments详解一：概述

    Fragment是activity的界面中的一部分或一种行为.你可以把多个Fragment们组合到一个activity中来创建一个多面界面并且你可以在多个activity中重用一个Fragment.你 ...

  8. 使用VBA实现Excel自杀功能

    曾经看到过一个“Excel-Home”出品的“关于Excel自杀功能”的视频教程,经认真学习后,我写下了自己的代码,分享于此. 实现思路: 使用VBA创建一个隐藏的名称,记录当前工作簿打开的次数,如果 ...

  9. Windows8 各种版本区别对比详解

    微软的 Windows8 操作系统提供了4个不同的版本,分别是 Windows RT.Windows 8 标准版.Windows 8 Pro 专业版 以及 Windows 8 Enterprise 企 ...

  10. 简单的C语言小学四则运算设计

    题目:设计一个简单的四则运算编辑器 思路:我使用的是C语言编程,看到题目首先要随机出3个随机数,其中两个为100以内的随机数(a,b),一个为0~3的随机数(k). k值的变化使得+ - * /的变化 ...