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 ...
随机推荐
- ED/EP系列1《简介》
电子存折(ED:ElectronicDeposit)一种为持卡人进行消费.取现等交易而设计的支持个人识别码(PIN)保护的金融IC卡应用.它支持圈存.圈提.消费和取现等交易. 电子钱包(EP:Elec ...
- Kettle计算器的使用以及字符串格式化
1.简介 先生成随机数,将生成的2列随机数进行计算,并且格式化计算结果 2.kettle流程图 3.流程图详细描述 3.1生成随机数 生成2个随机数字,列名为N1,N2 3.2计算器 将N1与N2对应 ...
- windows CE 6.0编译报BLDDEMO: There were errors building MY283错误解决办法
今天开始正式进入windows ce程序开发. 第一次编译windows ce6.0的系统,25分钟编译后报:BLDDEMO: There were errors building MY283 错误. ...
- scjp考试准备 - 3 - 关于Arrays
判断如下程序的最终输出值: import java.util.*; public class Quest{ public static void main(String[] args){ String ...
- MongoDB学习笔记-创建、更新、删除文档
创建 MongoDB中使用insert方法来向集合插入文档,然后保存到MongoDB中. db.foo.insert({"hehe":"呵呵"} ...
- 5个SQL核心
5个核心的SQL语句 1.SELECT -查询语句的逻辑处理顺序 5 SELECT <columnlist> 1 FROM <source objectlist> ...
- UITableView swift
// // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...
- SQLite数据库的基本API函数
1 .打开数据库: 说明:打开一个数据库,文件名不一定要存在,如果此文件不存在, sqlite 会自动创建.第一个参数指文件名,第二个参数则是定义的 sqlite3 ** 结构体指针(关键数据结构), ...
- xml之Schema架构
1.什么是Schema架构 2.Schema文档结构 3.Schema元素类型 1>element元素 <!--简单数据:类型--> <xs:element name=&qu ...
- 小组开发项目--NABC分析
我们小组--女神经们,开发项目是重力解锁,我认为我们的项目的最大特点就是不使用开锁键唤醒屏幕.下面我将针对这一特点进行NABC分析: N:经调查一部分人群的手机不能使用就是开机键坏了,我们就是针对这一 ...