offsetLeft 与 left的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} #demo {
width: 100px;
height: 100px;
/*position: absolute;*/
background-color: pink;
} </style>
</head>
<body>
<div id="demo" style="left:100px"></div>
</body>
</html>
<script>
var demo = document.getElementById("demo");
console.log(demo.offsetLeft); //打印出来的是0
console.log(demo.style.left); //打印出来的是100px </script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} #father {
width: 200px;
height: 200px;
margin: 100px;/*不是到margin左侧的距离*/
padding: 50px;
border: 10px solid blue;
position: absolute;
background-color: pink;
} #son {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
<script>
var son = document.getElementById("son");
console.log(son.offsetLeft); //打印出来是 50px;
</script>
offsetLeft 与 left的区别的更多相关文章
- offsetLeft,Left,clientLeft的区别
offsetLeft,Left,clientLeft的区别 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的 ...
- offsetLeft与style.left区别
在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...
- JS中offsetLeft,Left,clientLeft的区别（纯转贴）
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- javascript中无法通过div.style.left获取值的问题
一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTim ...
- JavaScript操作DOM的那些坑
js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...
- JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll ...
- JavaScript 特效之四大家族（offset/scroll/client/event）
三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...
- JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/c ...
随机推荐
- Matlab依据样本随机数求概率曲线
相关Matlab函数:hist, bar, cdfplot, ksdensity (1) hist函数 n = hist(Y, x) 假设x是一个向量,返回x的长度个以x为中心的,Y的分布情况. 比 ...
- iOS开发之---判断是否是手机号
iOS开发之---判断是否是手机号
- openwrt procd 运行的一些log
void procd_inittab(void) { #define LINE_LEN 128 FILE *fp = fopen(tab, "r"); struct init_ac ...
- openwrt 配置rsync服务
一: rsyn简介 remote synchronize顾名思意就知道它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接等附加信息. rsync是用 “rsyn ...
- linux 输入子系统（1） -Event types
输入系统协议用类型types和编码codecs来表示输入设备的值并用此来通知用户空间的应用程序. input协议是一个基于状态的协议,只有当相应事件编码对应的参数值发生变化时才会发送该事件.不过,状态 ...
- activity栈管理的3种方式
一.背景 在android开发过程最经常使用的组件非activity莫属. 通过分析activity的各种跳转,执行同学能够分析用户的各种行为.更重要的一点是在做插件化的过程中,我们经常会对activ ...
- mac的终端窗口的工作组的使用
1.打开终端,打开多个tab,分别进入目录, 2.点击窗口,将窗口存储为组,弹窗如下图 可以勾选恢复所有命令,存储 3.下次使用时,点击窗口,打开工作组即可
- HBase在滴滴出行的应用场景和最佳实践
摘要: 主要介绍了HBase和Phoenix在滴滴内部的一些典型案例.文章已在CSDN极客头条和<程序员>杂志发表,应朋友邀请,分享到云栖社区,希望给大家带来启发和帮助. 背景 对接业务类 ...
- 如何使用CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- C++使用模板、函数指针、接口和lambda表达式这四种方法做回调函数的区别比较
在C++中,两个类之间存在一种关系,某个类需要另外一个类去完成某一个功能,完成了之后需要告知该类结果,这种最普通最常见的需求,往往使用回调函数来解决. 如题,我总结下来有这么四种方式可以完成这项功能, ...