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 ...
随机推荐
- Jenkins+maven+SVN+Tomcat部署过程
一.下载地址 应首先确认安装了JDK: Jenkins下载地址:http://mirrors.shu.edu.cn/jenkins/windows-stable/jenkins-2.107.3.zip ...
- Arcgis Engine（ae）接口详解（5）：IGeometry几何基础操作
//点操作~~~~~~~~~~~~~~~~~~~~~~~~~ //通过坐标生成点 IPoint point = new PointClass(); point.PutCoords(, ); //获取点 ...
- visual studio 2013 update 3正式版出来了
微软的更新速度还是蛮快的吗.新版本号出来了,大家快下载体验一下吧,详细下载地址在http://www.visualstudio.com/zh-cn/downloads/download-visual- ...
- 基于mac系统的apacheserver的使用流程
打开终端.输入下面命令:sudo apachectl start 此时Apache已经开启.在浏览器中输入本地ip地址能够看到it works! 打开前往----电脑------Macintosh H ...
- huawei校招测试题
三道题两小时. 第一题,圈住所有点的长方形,很简单略过. 第二题:奇偶排序. 奇偶排序 描述: 输入若干(不超过1000个)非负整数数字,请先取出为奇数的数字按从大到小排序,再取出偶数从小到大进行排序 ...
- Linux搭建lnmp环境
在CentOS 6上使用yum安装lnmp服务,原文链接http://www.qiansw.com/yum-lnmp.html
- HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- springboot在eclipse实现热部署
eclipse使用spring-tool-suite插件创建springboot项目,项目创建完成后. 选中项目,右键 Spring Tools --> Add Boot Devtools 点 ...
- RPi 2B IPC webcam server
/**************************************************************************** * RPi 2B IPC webcam se ...
- 使用pngcrush压缩png图片
写在前面: Pngcrush是一个优化的PNG(便携式网络图形)文件.它可以运行在MSDOS窗口中一个命令行,或从UNIX或LINUX命令行.其主要目的是为了 减少PNG IDAT数据 ...