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 ...
随机推荐
- CF1062D Fun with Integers
思路: 找规律. 实现: #include <bits/stdc++.h> using namespace std; typedef long long ll; int main() { ...
- Android Studio中通过CMake使用NDK并编译自定义库和添加预编译库
Note:这篇文章是基于Android Studio 3.01版本的,NDK是R16. step1:创建一个包含C++的项目 其他默认就可以了. C++ Standard 指定编译库的环境,其中Too ...
- zookeeper系列 （第一章 ：ubuntu 下安装zookeeper）
1.zookeeper是分布式一致性管理服务.解决了分布式中死锁,不一致,原子性操作等问题. 2.环境:系统ubuntu,zookeeper 下载地址:http://archive.apache.or ...
- 严重：The web application [web01] appears to have started a thread named ...
Tomcat报错 严重:The web application [web01] appears to have started a thread named [PooledThread-1] but ...
- IOS弹出视图preferredContentSize
UIViewController.preferredContentSize代理旧方法 contentSizeForViewInPopover. self.contentSizeForViewInPop ...
- HDU 1561 The more, The Better （树形DP，常规）
题意:给一个森林,n个节点,每个点有点权,问若从中刚好选择m个点(选择某点之前必须先选择了其父亲),使得这m个点权之和最大为多少? 思路: 比较常规.就是DFS一次,枚举在子树中可能选择的k个点(注意 ...
- 洛谷 P1734 最大约数和
题目描述 选取和不超过S的若干个不同的正整数,使得所有数的约数(不含它本身)之和最大. 输入输出格式 输入格式: 输入一个正整数S. 输出格式: 输出最大的约数之和. 输入输出样例 输入样例#1: 1 ...
- （十一）mybatis之映射器（select）
映射器 映射器的主要元素有八种: 元素名称 描述 select 查询语句,可自定义参数 insert 插入语句,执行后返回插入的条数 update 更新语句,执行后返回更新的条数 delete 删除语 ...
- Python学习日志9月14日
今天早晨又没有专心致志的学习,我感觉我可能是累了,需要减轻学习的程度来调整一下咯.这几天装电脑弄的昏天暗地的,身体有点吃不消了.时间真是神奇的魔法,这半个月来,每隔几天都有想要改变策略的想法.今天早晨 ...
- Go 1.4 正式版发布，官方正式支持 Android
Go 1.4 正式发布啦,是第五个 Go 的稳定版本,与上一个稳定版本 Go 1.3 相隔 6 个月.Go 1.4 包括一些小的语言改进,支持更多的操作系统和处理器架构:改进了工具链和库.同时,Go ...