02-offsetLeft和offsetTop
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1 {
width: 300px;
height: 300px;
padding: 100px;
margin: 100px;
position: relative;
border: 100px solid #000;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
/*position: absolute;*/
/*left: 10px;*/
/*top: 10px;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box3">
<div class="box2" style="left: 10px"></div>
</div>
</div> <script> var box2 = document.getElementsByClassName("box2")[0]; //offsetTop和offsetLeft
console.log(box2.offsetLeft);
console.log(box2.style.left); </script> </body>
</html>
02-offsetLeft和offsetTop的更多相关文章
- offsetLeft与offsetTop详解
offsetLeft与offsetTop使用方法一样,只是一个是找距离定位父级(position:relative)左边的距离,一个是找距离定位父级上边的距离 没有定位则找body,我们还是看看ie7 ...
- offsetleft、offsetTop、offsetParent的兼容性问题
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 简单理解offsetleft、offsetTop、offsetParent
先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...
- 【JavaScript】全面解析offsetLeft、offsetTop
假设 obj 为某个 HTML 控件.obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetRight 指 obj 距离右方或上层控件的位置,整型, ...
- 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...
- 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释
offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...
- 【转】获取到元素的 offsetLeft 、offsetTop属性不正常的解决方法。
原地址:http://hi.baidu.com/huidust520/item/85da006981a6c635ad3e834e 我在工作中遇到个问题: 在ie7下和360浏览器下获取到的 offs ...
- HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）
IE7以上(不是火狐): 父级没有定位: 本身没有定位: ==> offsetParent:body 本身定位为:absolute/relative: ==> offsetParent:b ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
随机推荐
- CF1072C Cram Time
思路: 首先二分找到使x * (x + 1) / 2 <= a + b最大的x,然后令p = min(a, b), q = max(a, b),按照x,x - 1, ..., 1的顺序选取数字把 ...
- webstorm使用总结
1.webstorm显示ES6语法错误,和nodejs语法错误未提示的问题,只需要在 此处解决ES6语法错误问题: 此处解决不支持node语法的问题: 然后就显示正常啦.
- Azure 8 月新公布
Azure 8 月新发布:Cosmos DB 每分钟请求单位,存储的托管磁盘及促销,高级和标准磁盘存储大尺寸磁盘,高级磁盘存储小尺寸磁盘. Azure Cosmos DB:每分钟请求单位为您降低成本, ...
- pyhton中的__new__和__init__
首先__new__() 函数只能用于从object继承的新式类:其次,object将__new__()方法定义为静态方法,并且至少需要传递一个参数cls,cls表示需要实例化的类,此参数在实例化时由P ...
- SQL增删查改语句
一.增:有4种方法 1.使用insert插入单行数据: 语法:insert [into] <表名> [列名] values <列值> insert into sheet1 va ...
- SQLite C/C++ 教程
目录 1安装 2 C/C++ Interface APIs 3连接到数据库 4创建表 5插入操作 6更新操作 7删除操作 安装 在我们开始使用SQLite在C / C++程序,我们需要确保SQLite ...
- python基础一 day10（2）
复习: # 三元运算符# 接收结果的变量 = 条件为真的结果 if 条件 else 条件为假的结果# 接收结果的变量 = “真结果” if 条件 else “假结果”## 命名空间 和 作用域# 三种 ...
- robotframe处理日志中文问题
unicode('${addr1.text}',"utf-8")
- WINDOWS-API：取得系统语言种类-GetOEMCP
GetOEMCP VB声明 Declare Function GetOEMCP Lib "kernel32" Alias "GetOEMCP" () As Lo ...
- Java数据结构面试题
1.栈和队列的共同特点是(只允许在端点处插入和删除元素) 4.栈通常采用的两种存储结构是(线性存储结构和链表存储结构) 5.下列关于栈的叙述正确的是(D) A.栈是非线性结构B.栈是一种树状 ...