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 ...
随机推荐
- mysql语句:SET NAMES UTF8
一直以来只知道mysql_query("SET NAMES UTF8");是设定数据库编码的,但是一直不清楚“SET NAMES UTF8”是什么. 直到今天才知道 SET NAM ...
- exists用在linq上
SQL里面,有时候会用到exists或者not exists. select * from yb t1 where not exists(select 1 from yb t2 where trunc ...
- Django 之 中间件
一.概念 1.什么是中间件? 官方解释:中间件是用来处理Django的请求和响应的框架级别的钩子.基于全局范围产生影响. 平民解释:中间件是帮助我们在视图函数执行前和执行后做的操作.它本质上就是一个自 ...
- sanic官方文档解析之路由
1,路由,路由相当于一个网址的地址,来确定网址的位置和唯一性 当http://server.url/被允许访问服务器,当最后的"/"通过路由匹配到了业务逻辑处理的函数,将会返回一个 ...
- bash shell parameter expansion
1 ${parameter%word}和${parameter%%word} ${parameter%word},word是一个模式,从parameter这个参数的末尾往前开始匹配.单个%进行最短匹配 ...
- 使用Qt发送HTTPS请求
示例代码: #include "mainwindow.h" #include "ui_mainwindow.h" #include <QNetworkAc ...
- BZOJ2327: [HNOI2011]勾股定理
BZOJ2327: [HNOI2011]勾股定理 Description 题解Here! 这是一道神题... 我一开始把题目看错了,我以为是在$n$根木棒中选两个$i,j$满足$gcd(i,j)==1 ...
- PPAPI与Browser间使用AsyncIPC通信
採用AsyncIpc这个项目(https://github.com/hicdre/AsyncIpc).来完毕PPAPI Plugin进程与Browser进程的通信. foruok原创.如需转载请关注f ...
- UIView局部点击
今天上班遇到一种情况,需要局部响应点击事件,比如在一个UIImageView中设置一个小圆圈图片,要求点击圆圈里面不响应点击,点击小圆圈外面的部分响应点击.可以通过重写hitTest:withEven ...
- C++的学习 (此博客将一直补充更新下去，C++语法方面的内容不开新随笔了， *【语法学习】)
// #include <sstream> // stringstream 是 C++ 提供的另一个字串型的串流(stream)物件,包含在上述头文件中 // 先谈它在字符串处理方面的应用 ...