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 ...
随机推荐
- LN : Eden Polymorphic And OOP Design Pattern Abstract Factory
Appreciation to our TA, +7, who designed this task. Client.cpp #include <iostream> #include &l ...
- Android Studio 遇到的java.util.concurrent.ExecutionException:com.android.ide.common.process.ProcessExce问题
在将一个Eclipse的项目转移到AndroidStudio的过程中,碰到了的问题如下: Error:Execution failed for task ':learnChinese:mergeDeb ...
- CSS布局之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- 源文件名长度大于系统支持的长度,无法删除，java主方法执行方式删除
import java.io.File; /** * @author 海盗船长 * 2017年2月14日11:24:26 */ public class DeleteFiles { public st ...
- 洛谷 P1334 瑞瑞的木板==P2664 【题目待添加】
题目描述 瑞瑞想要亲自修复在他的一个小牧场周围的围栏.他测量栅栏并发现他需要N(1≤N≤20,000)根木板,每根的长度为整数Li(1≤Li≤50,000).于是,他神奇地买了一根足够长的木板,长度为 ...
- python一周速成学习笔记
目录 一:语法元素 1.注释,变量,空格的使用 2.输入函数,输出函数 3.分支语句,循环语句 4.保留字in,同步赋值 5.import与def以及turtle库 6.eval函数与repr函数 二 ...
- ftp - Internet 文件传输程序 (file transfer program)
概述 (SYNOPSIS) ftp [-pinegvd ] [host ] pftp [-inegvd ] [host ] 说明 (DESCRIPTION) 用户通过 Ftp 这个程序来使用 Inte ...
- Qt+事件的接收和忽略
事件的接收与忽略的示意图如下图: 依据前面的知识,事件是可以依据情况进行接收和忽略的,事件的传播是组件层次上面的,而不是依靠类继承机制.在一个特殊的情形下,我们必须使用accept()和ignore( ...
- javascript顺序数组简单实现个二分查找
直接上码了注释写得很详细: function bsearch(A,x){ //l:查找范围左 r:查找范围右 let l = 0, //查询范围左边界 r = A.length-1, //查找范围右边 ...
- 小型LAMP搭建
一.dns的搭建 安装dns服务 yum install bind 修改dns的主配置文件 [root@234c17 named]# vim /etc/named.conf // // named.c ...