Javascript offsetLeft详情
<!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详情的更多相关文章
- JavaScript美术馆进化史
内容选自<<JavaScript DOM 编程艺术>>第4-6章,跟着作者一起见证美术馆的进化吧. 先放效果图,然后一步步做出每个效果.每个效果都有它实用的地方,且知道过程可以 ...
- 按照vue文档使用JavaScript钩子但是却不能执行动画?
大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 --------- JavaScript钩子 详情见vue文档: https://cn.vuejs.or ...
- JavaScript小记
JavaScript小记 1. 简介 1. 语言描述 JavaScript 是一门跨平台.面向对象的弱类型动态脚本编程语言 JavaScript 是一门基于原型.函数先行的语言 JavaScript ...
- CKPlayer从Cookie里读取上次播放记录的一个demo
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- jq 操作表单中 checkbox 全选 单选
知识点: Note: 1: .prop() 和 .attr() 方法的区别 .prop() 针对标签既有属性 .attr() 针对自定义属性 2: $('input:checked')即为选中元素. ...
- wpgcms---详情页面数据怎么渲染
wpgcms的详情页面的数据会被保存在 contentInfo 这么一个字段里面. 面包屑导航调用: <p>当前位置 {% for c in crumb|slice(1, crumb|le ...
- 给Jquery easyui 的datagrid 每行添加操作链接
背景 我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...
- 2019-09-17 thinkphp网页静态化
public function details(){ $pid = I('get.goods_id'); $filename = "details_".$pid.".ht ...
随机推荐
- Oracle private dblink和pubic dblink
DB : 11.2.0.3.0 Oracle DBLINK 创建分为private 和 public dblink,默认创建的为private ; private dblink 只有创建的schema ...
- AppCan移动平台,开发者是这样用的……
随着生活节奏的加快,每天各种压力山大,难免产生心理问题.然而穷的都要吃土了,又不想面对陌生人,怎么办? 近日,AppCan开发者樊星阳“一夜爆红”,引起猎云网的持续关注.起因是这样的,樊星阳利用App ...
- hdu 5427 A problem of sorting
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5427 A problem of sorting Description There are many ...
- UIImagePickerController之Block回调
方法使用:引入头文件 #import "UIImagePickerController+Block.h" 我这拖出来的两个属性 @property (weak, nonatomic ...
- xcode 产生指定颜色的图片imageWithColor
是在万能的stackOverflow上找到的答案,留下了, 原地址:http://stackoverflow.com/questions/6496441/creating-a-uiimage-from ...
- Linq之查询表达式语法详解
1.闲言碎语 由于项目的需要接触到Linq,刚开始有些不适应,好多概念都很模糊.不过经过一段时间的摸索,慢慢地对Linq有了一个更加深入的了解.在此记录一下备忘. 2.查询表达式语法 执行L ...
- 新手学Android
Eclipse平台下的新手Android学习记录. 1.打开一个本地的项目 在Project Explorer右键->Import->Existing Projects into Work ...
- XAML中的Path
利用Path创建图形的时候,如果path对象的Fill属性不设置,那么绘制出来的图形首尾是不连接的. 如果设置了Fill属性,当Fill的Color属性为Transparent时,图形也不会首尾连接: ...
- N!大整数阶乘问题
问题:求N!阶乘,1<=N<10000 思路:windows下面visual 6.0中c一个整型占4个字节(自己可以try一下,printf("%d", sizeof( ...
- LintCode-BackPack II
Given n items with size A[i] and value V[i], and a backpack with size m. What's the maximum value ca ...