04-offsetLeft和style.left的区别
<!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); // 一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
//如果父系盒子中都没有定位，以body为准。
//style.left只能获取行内式，如果没有返回“”; // 二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
//div.offsetLeft = 100; div.style.left = "100px"; // 三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
//style.left和style.top可以赋值
//offsetLeft和offsetTop只能获取值 // 四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
//style.left只能获取行内式，如果没有返回“”; </script> </body>
</html>
04-offsetLeft和style.left的区别的更多相关文章
- offsetLeft和style.left的区别
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...
- DOM中offsetLeft与style.left的区别
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...
- offsetLeft与style.left的区别
参考:http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定 ...
- offsetleft 和 style.left 的区别
offsetLeft 获取的是相对于父对象的左边距: left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距: 如果父div的position定义为rel ...
- android 中theme.xml与style.xml的区别
from://http://liangoogle.iteye.com/blog/1848448 android 中theme.xml与style.xml的区别: 相同点: 两者的定义相同. <r ...
- offsetLeft与style.left区别
在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...
- .style, .getComputedStyle(),.currentStyle区别
1)style只能获取行间样式(写在标签里面的):能读能写 2)currentStyle是专属ie的属性,区别他返回的是最终样式 及包括行间和外链css 3)getComputedStyle是一个可以 ...
- js中的offsetLeft和style.left
(1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...
- js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...
随机推荐
- 【Web应用-大文件部署】上传超过 2M 的文件到 Azure PHP 网站失败
问题描述 上传超过 2M 的文件到 Azure PHP 网站失败. 问题分析 由于 PHP 本身默认上传文件的上限是 2M,所以当上传超过2M的文件时会报错. 解决方法 根据以下步骤进行配置: 在 s ...
- 解决在安装Fiddler4.6版本后，在手机上安装证书出现的问题解决方法
解决在安装Fiddler4.6版本后,在手机上安装证书出现的问题解决方法 设置fiddler抓手机包后,在手机上访问http://ip:port,出现如下问题: 问题:creation of the ...
- Clown without borders 2017/1/10
原文 You'll laugh, you'll cry It's aesy to imaginehow the activities of CWB produce many emotional and ...
- 51nod 1089 最长回文子串 V2（Manacher算法）
基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 输入N求N的阶乘的10进制表示的长度.例如6! = 720,长度为3. Input 第1行:一个数T,表示后面用作输入 ...
- vertx从入门到精通
1.Vert.x安装指南 http://blog.csdn.net/sdyy321/article/details/38926005 http://blog.csdn.net/chszs/articl ...
- Python 字符编码问题的处理
python中的字符编码问题往往是初学者容易弄不明白的问题, 要想将这个问题搞清楚,需要先弄明白以下的概念 decode 和 encode 函数的作用 字符串字面量的编码格式 decode(str) ...
- Ubuntu16.04下使用sublime text3搭建Python IDE
本来是想用pycharm,但你看它的内存要求,我的虚拟机一共也就1G Vim太别扭了,就算有代码颜色,不能自动对齐,不能规范格式,跳转到函数定义,显示文档,要配置起来太费劲,所以就尝试着用sublim ...
- UVA 12549 Sentry Robots （最小点覆盖）
这道题挺像hdu 5093 Battle ships的,不过那道题是要求最多放置的点数,而这道题是要求最小点覆盖. 顶点覆盖的定义是:在G中任意边至少有一个端点属于顶点集合S. 一个重要的位置有(x, ...
- 贴一发STL源码
int my_lower_bound(int size, long long key){ int first = 0, middle; int half, len; len = si ...
- vue for循环中常见问题 之 求和（合计）
例:求后台返回数据this.dataInfo 中某个字段(item.totalSum)的和,只需添加computed,然后模板中直接可以使用totalSumAll (不需要再data中声明) comp ...