<!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的区别的更多相关文章

  1. offsetLeft,Left,clientLeft的区别

    offsetLeft,Left,clientLeft的区别 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的 ...

  2. offsetLeft与style.left区别

    在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...

  3. JS中offsetLeft,Left,clientLeft的区别（纯转贴）

    假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...

  4. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  5. javascript中无法通过div.style.left获取值的问题

    一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTim ...

  6. JavaScript操作DOM的那些坑

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...

  7. JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll ...

  8. JavaScript 特效之四大家族（offset/scroll/client/event）

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  9. JavaScript动画：offset和匀速动画详解(含轮播图的实现)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/c ...

随机推荐

  1. sessionFactory的创建和四种查询方式

    1,关于sessionFactory的创建 5.0版本之前,下面这种方式在5.0及之后,可能会出问题,建议修改为5.0之后的方式 // 实例化Configuration Configuration c ...

  2. JSP复习笔记

    1.注释 <!--这个注释会显示在HTML源码中--> <%--隐藏注释,不会显示在HTML源码中--%> 2.声明 <%! java声明 声明变量,方法等 %> ...

  3. HBase协处理器同步二级索引到Solr(续)

    一. 已知的问题和不足二.解决思路三.代码3.1 读取config文件内容3.2 封装SolrServer的获取方式3.3 编写提交数据到Solr的代码3.4 拦截HBase的Put和Delete操作 ...

  4. nlp_tool

    http://www.afenxi.com/post/9700 11款开放中文分词引擎大比拼 附录评测数据地址http://bosonnlp.com/dev/resource 各家分词系统链接地址Bo ...

  5. HashTable HashMap区分

    主要是安全.速度: 1.HashMap可以接受null的键. 2.HashMap是非synchronized,而Hashtable是synchronized,这意味着Hashtable是线程安全的,多 ...

  6. 大O符号

    大O 就是 时间复杂度.时间复杂度是大概的描述一个算法的用时(实际上从侧面的表达了他的效率) 最好时间复杂度,通常指在最好情形下,这个算法用时.反之,最坏情况下的就是最坏时间复杂度.通常 冒泡算法 的 ...

  7. HDU1964 Pipes —— 插头DP

    题目链接:https://vjudge.net/problem/HDU-1964 Pipes Time Limit: 5000/1000 MS (Java/Others)    Memory Limi ...

  8. vi编辑器设置行号可见

    vi 设置行号 需要切换到命令模式下,输入set number :set number 按下回车即可

  9. maven配置本地仓库和国内镜像仓库，解决国内访问国外中央仓库速度过慢问题

    Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 1.配置本地仓库   打开conf文件夹下面的setting.xml文件 红色方框为配置本地仓 ...

  10. linux初级学习笔记一：linux操作系统及常用命令，及如何获取命令的使用帮助！(视频序号：02_1,2)

    本节学习的命令:ls,cd,type,pwd, printenv, hash, date, clock, man, hwclock, info, cal, echo, printf, file! 本节 ...