<!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. 网站网页生成.shtml访问无法显示

    网站换了服务器后发现shtml网页无法访问,原因是没有注册.shtml扩展名,解决方法如下 IIS6.0解析shtm,shtml文件由于IIS6.0的安全性较以前有特别大的改进,所以在很多功能默认情况 ...

  2. TFS使用指南

    上一篇文章已经简略介绍过TFS的安装与管理,本篇文章主要描述一下我个人在工作过程中使用TFS的一些指南与建议.本章内容预览: 1.  项目计划与跟踪 经常有很多朋友在日常聊天中抱怨做计划很无畏,因为计 ...

  3. ios各种手势，很有意思

    转自http://blog.csdn.net/likendsl/article/details/7554150 这哥们很厉害的 一.概述 iPhone中处理触摸屏的操作,在3.2之前是主要使用的是由U ...

  4. [转]linux中强大的screen命令

    [转]linux中强大的screen命令 http://pythonorg.diandian.com/post/2012-01-05/40027464147 今天用SCREEN用点生了,有几个功能不知 ...

  5. [转]ubuntu(12.04)下， 命令 ，内核 源代码的获取

    [转]ubuntu(12.04)下, 命令 ,内核 源代码的获取 http://blog.chinaunix.net/uid-18905703-id-3446099.html 1.命令:例如:要查看l ...

  6. 4 我们的第一个c#程序

    1.       控制台应用程序. 在我们这个培训中主要使用控制台应用程序来讲解知识点和做练习. 什么是控制台程序? 控制台程序运行在dos窗口.没有可视化的界面.可以通过Dos窗口进入输入和输出显示 ...

  7. log4j打印参数

    %m   输出代码中指定的消息 %p   输出优先级,即DEBUG,INFO,WARN,ERROR,FATAL  %r   输出自应用启动到输出该log信息耗费的毫秒数  %c   输出所属的类目,通 ...

  8. MySQL 存储过程学习笔记

    存储过程框架 DEMILITER $$ -- 重定义符 DROP PROCEDURE IF EXISTS store_procedure$$ -- 如果存在此名的存储过程,先删除 CREATE PRO ...

  9. c读取文本文档

    想数一下文本文档一共有多少行,写了个小程序 1.用fopen()以只读方式打开文件 2.用fgetc()获取文件流中的字符内容 3.如果字符内容为'\n'换行符,count++ 最后输出count的值 ...

  10. 将SQLServer结果导出为excel文件

    相信大家常常会遇到将SqlServer查询结果导出到Excel的问题.如果导出的次数少,直接“Save Results As...”就是了:但是当要分别在每个表取样,那就相当麻烦了.今天就为大家提供一 ...