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

  1. offsetLeft和style.left的区别

    offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...

  2. DOM中offsetLeft与style.left的区别

    offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relat ...

  3. offsetLeft与style.left的区别

    参考:http://www.cnblogs.com/woshilee/articles/1951457.html offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定 ...

  4. offsetleft 和 style.left 的区别

    offsetLeft 获取的是相对于父对象的左边距: left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距: 如果父div的position定义为rel ...

  5. android 中theme.xml与style.xml的区别

    from://http://liangoogle.iteye.com/blog/1848448 android 中theme.xml与style.xml的区别: 相同点: 两者的定义相同. <r ...

  6. offsetLeft与style.left区别

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

  7. .style, .getComputedStyle(),.currentStyle区别

    1)style只能获取行间样式(写在标签里面的):能读能写 2)currentStyle是专属ie的属性,区别他返回的是最终样式 及包括行间和外链css 3)getComputedStyle是一个可以 ...

  8. js中的offsetLeft和style.left

    (1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字 ...

  9. js和jq中常见的各种位置距离之offsetLeft和position().left的区别（四）

    offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...

随机推荐

  1. 利用html5canvas给图片增加文字水印

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Hibernate三种批量处理数据

    概念:批量处理数据是指在一个事务场景中处理大量数据. 在应用程序中难以避免进行批量操作,Hibernate提供了以下方式进行批量处理数据: (1)使用HQL进行批量操作  数据库层面  execute ...

  3. MySQL的information_schema的介绍（转）

    转自:http://www.cnblogs.com/hzhida/archive/2012/08/08/2628826.html, 大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一 ...

  4. 一样的Java，不一样的HDInsight大数据开发体验

    大数据的热潮一直居高不下,每个人都在谈.你也许不知道,早些年这个领域可是有个非常「惹眼球」的段子: 1首先开始科普 什么是 HDInsight Azure HDInsight 是 Hortonwork ...

  5. 利用基于@AspectJ的AOP实现权限控制

    一. AOP与@AspectJ AOP 是 Aspect Oriented Programming 的缩写,意思是面向方面的编程.我们在系统开发中可以提取出很多共性的东西作为一个 Aspect,可以理 ...

  6. bat 符号说明

    netstat -an|findstr 139 ipconfig/all findstr IP ipconfig/all |findstr   物理地址             定值选行 ipconf ...

  7. codevs 4165 ​高精度求阶乘

    时间限制: 1 s  空间限制: 256000 KB  题目等级 : 白银 Silver 题目描述 Description 用高精度计算出S=n! 其中"!"表示阶乘,例如:5!= ...

  8. flask--Django 基本使用

    #导入flaskfrom flask import Flask #创建应用 app = Flask(__name__) #创建根路径视图 @app.route('/') def hello_world ...

  9. python自动化基础问题解析

      (1)自动化代码中用到的设计模式: po模式(page object): 1.PO提供了一种业务流程与页面元素操作分离的模式,这使得测试代码变得更加清晰. 2.页面对象与用例分离,使得我们更好的复 ...

  10. mac 上node.js环境的安装与测试【转】

    http://blog.csdn.net/baihuaxiu123/article/details/51868142 一 摘要 如何大家之前做过web服务器的人都知道,nginx+lua与现在流行的n ...