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 ...
随机推荐
- 关于React的赋值与调用方法
#关于React的赋值与调用方法 比如调用方法的时候我们可以这样来使用closeFrm() <div className = "infoFrm_close" onMouseO ...
- rpm包的安装方法
每次都记不住,这次必须整理一下!cd到你存放rpm文件包的目录rpm -ivh linuxqq-v1.0.2-beta1.i386.rpm安装时可能会遇到缺少包的错误.rpm -ivh --repla ...
- DataPicker以及TimePicker显示时间和日期（屏幕上显示）
public class MainActivity extends Activity { private DatePicker date_picker;private TimePicker time_ ...
- uvm_subscriber——告诉她我们来过
Subscribers are basically listeners of an analysis port. They subscribe to a broadcaster and receive ...
- 保存 http request 的数据到数据库表
开发需求:把 http request 对象的数据保存到数据库中 第一步:编写 RequestInfoService 类,保存方法名是 saveRequestInfo // 保存request信息 p ...
- 安装AAA服务器遇到的问题
安装升级AAA服务器的操作思路: 第一种:在原始服务器下更新升级安装包,实现升级: 第二种:重新安装最新版本的IOS,实现版本更新: 第一种方案更新AAS服务器ios 步骤1:copy软件更新包到li ...
- 为 Azure 应用服务配置连续部署工作流
本快速入门介绍了如何将应用服务 GitHub 集成以实现连续部署工作流.在本教程中完成的所有操作均符合1元试用条件. 本快速入门介绍了如何将应用服务 GitHub 集成以实现连续部署工作流.在本教程中 ...
- c++的const和static区别
const定义的常量在超出其作用域之后其空间会被释放,而static定义的静态常量在函数执行后不会释放其存储空间. static表示的是静态的.类的静态成员函数.静态成员变量是和类相关的,而不是和类的 ...
- Linux中grep、sed、awk使用介绍
linux文件操作命令介绍1)grepgrep 用于在文件中查找符合条件的记录grep 参数 过滤条件 文件过滤的条件中可使用正则表达式-c 显示符合的行数-i 忽略大小写-n 显示符合要求的记录,包 ...
- PG extract 函数示例
pg 对时间的处理还是很灵活的, + - * / 都有支持 期间有个extract 函数还是很有用的,我们先来看看几个例子:[code] postgres=# select extract(epoc ...