<!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. ED/EP系列1《简介》

    电子存折(ED:ElectronicDeposit)一种为持卡人进行消费.取现等交易而设计的支持个人识别码(PIN)保护的金融IC卡应用.它支持圈存.圈提.消费和取现等交易. 电子钱包(EP:Elec ...

  2. Kettle计算器的使用以及字符串格式化

    1.简介 先生成随机数,将生成的2列随机数进行计算,并且格式化计算结果 2.kettle流程图 3.流程图详细描述 3.1生成随机数 生成2个随机数字,列名为N1,N2 3.2计算器 将N1与N2对应 ...

  3. windows CE 6.0编译报BLDDEMO: There were errors building MY283错误解决办法

    今天开始正式进入windows ce程序开发. 第一次编译windows ce6.0的系统,25分钟编译后报:BLDDEMO: There were errors building MY283 错误. ...

  4. scjp考试准备 - 3 - 关于Arrays

    判断如下程序的最终输出值: import java.util.*; public class Quest{ public static void main(String[] args){ String ...

  5. MongoDB学习笔记-创建、更新、删除文档

    创建     MongoDB中使用insert方法来向集合插入文档,然后保存到MongoDB中.     db.foo.insert({"hehe":"呵呵"} ...

  6. 5个SQL核心

    5个核心的SQL语句 1.SELECT -查询语句的逻辑处理顺序 5     SELECT <columnlist> 1     FROM <source objectlist> ...

  7. UITableView swift

    // // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...

  8. SQLite数据库的基本API函数

    1 .打开数据库: 说明:打开一个数据库,文件名不一定要存在,如果此文件不存在, sqlite 会自动创建.第一个参数指文件名,第二个参数则是定义的 sqlite3 ** 结构体指针(关键数据结构), ...

  9. xml之Schema架构

    1.什么是Schema架构 2.Schema文档结构  3.Schema元素类型 1>element元素 <!--简单数据:类型--> <xs:element name=&qu ...

  10. 小组开发项目--NABC分析

    我们小组--女神经们,开发项目是重力解锁,我认为我们的项目的最大特点就是不使用开锁键唤醒屏幕.下面我将针对这一特点进行NABC分析: N:经调查一部分人群的手机不能使用就是开机键坏了,我们就是针对这一 ...