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 ...
随机推荐
- 2013上半年中国CRM市场分析报告
经过了十多年的风风雨雨,CRM度过了漫长的市场培育期,即将迎来成熟期.目前这一阶段也是CRM惨烈搏杀的一个阶段,据不完全统计,国内大大小小的CRM厂商已经超过600家,各厂商几度火拼,努力扩大自己在C ...
- 洛谷P4017 最大食物链计数
拓扑排序板子题 #include <iostream> #include <cstdio> #include <cstring> #include <queu ...
- leetcode128 Longest Consecutive Sequence
思路: 维护一个unordered_map,key是每个连续区间的端点,value是该区间的长度. 实现: class Solution { public: int longestConsecutiv ...
- android 插件化框架speed-tools
项目介绍: speed-tools 是一款基于代理模式的动态部署apk热更新框架.插件化开发框架: speed-tools这个名字主要指的快速迭代开发工具集的意思. 功能与特性: 1.支持Androi ...
- ABC3D创客项目：国旗
国旗是一个国家的象征,也是一个民族的骄傲,国旗带给人们的不仅是荣耀,更多的是爱国的情结.看一场天安门的升旗仪式一度成为广大游客去到北京的必有项目,看国旗仪仗队将五星红旗与太阳同时升起,象征着我国充满活 ...
- 编写shellcode的几种姿势
今天开始在做hitcon-training的题目,做到lab2就发现了自己的知识盲区,遇到无法执行shell的情况,需要自己打shellcode执行cat flag 操作 经过一系列的搜索,发现了几种 ...
- Clover KextsToPatch 使用方法 2015.10.21
Clover KextsToPatch 使用方法 2015.10.21 前些天,因为 Thinkpad X230 BIOS 白名单限制,给她换了一块 ar9285 无线网卡,只是因为这块网卡正好可 ...
- JS函数节流和防抖
看JS高级程序设计时,了解到一个概念--函数节流,是为了防止在高频率触发某些事件导致浏览器崩溃.最近又了解到另一个概念,防抖,感觉和函数节流很像,也查看了很多篇博文,算是理解了. 区别: 函数节流:频 ...
- 【计算机网络】DNS的作用以及修改DNS的方法
1.DNS的作用及修改DNS的方法 1.1.DNS的作用 DNS就是将域名映射成ip的分布式数据库服务器,它的作用如下图: 1.2.修改DNS的方法 常用的DNS服务器 1.114.114.114.1 ...
- （62）zabbix客户端自动注册
1. 概述 上一篇内容<zabbix自动发现配置>,大概内容是zabbix server去扫描一个网段,把在线的主机添加到Host列表中. 我们本篇内容与上篇相反,这次是Active ag ...