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 ...
随机推荐
- 慢慢积累遇到的linux指令
sudo 用来以其他身份来执行命令,预设身份为root sudo apt install git 下载git sudo root 进入root身份(只有这个身份ubuntu和window系统之间才能共 ...
- 安装MySQLdb出现HAVE_WCSCOLL重定义问题的解决方法
root@wodeyitian MySQL-python-1.2.3]# python setup.py install running install running bdist_egg runni ...
- npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org
- HtmlUnit爬取Ajax动态生成的网页以及自动调用页面javascript函数
HtmlUnit官网的介绍: HtmlUnit是一款基于Java的没有图形界面的浏览器程序.它模仿HTML document并且提供API让开发人员像是在一个正常的浏览器上操作一样,获取网页内容,填充 ...
- mac上使用命令行显示隐藏文件
终端中输入命令 打开<终端> - 粘贴下面的两行命令执行 defaults write com.apple.finder AppleShowAllFiles TRUEkillall Fin ...
- URL URI URN的区别
下面这张图可以完美的解释他们三者之间的关系 URI包含URL和URN Uniform Resource Identifier :统一资源标志符,用于标识某一互联网资源 Uniform Resoutce ...
- QT5:先导篇 全局定义
一.简介 <QtGlobal>头文件包含了Qt类库的一些全局定义,包含基本数据类型 函数和宏 二.全局变量定义 <QtGlobal>定义的数据类型: Qt数据类型 ...
- [NOI2010]海拔——最小割+对偶图
题目链接 SOLUTION 想一下最优情况下肯定让平路或下坡尽量多,于是不难想到这样构图:包括左上角的一部分全部为\(0\),包括右下角的一部分全部为\(1\),于是现在问题转化为求那个分界线是什么. ...
- CSS - position属性小结
Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...
- 118. Pascal's Triangle@python
Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. Example: Inpu ...