<!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. GetClassName 取得的类名有

    今天上午稍微跟踪了一下自己的项目里面的各个空间,得知GetClassName可以取到以下类名:Static\Edit\Button\ComboBox\msctls_trackbar32\SysTabC ...

  2. [转+补]Android打包so后魅族5中安装运行崩溃问题的解决方法

    上周在做噪音检测so集成中,遇到不同的so库打包到 APK 时,安装在某些机器上,出现 java.lang.UnsatisfiedLinkError 加载失败. 为此,深究了一下原理,和给出了解决方案 ...

  3. [翻译] API测试的最佳实践 - 介绍

    API测试的最佳实践 - 介绍 在上一篇“是什么让API测试很叼”一文中,我们讨论API与其他形式的软件测试的差异.部分是因为API之间的通信压根就没考虑让你能读懂,纯粹是为了方便计算机之间的交互而设 ...

  4. tar.gz

    tar.gz,或者.tgz的文件一般是在UNIX下用tar和gunzip压缩的文件.可能的文件名还有.tar.gz等.gunzip是一种比pkzip压缩比高的压缩程序,一般 UNIX下都有.tar是一 ...

  5. C#操作Txt(追加模式)

    /// <summary> /// 输出指定信息到文本文件 /// </summary> /// <param name="msg">输出信息& ...

  6. COGS 788. 昵称

    788. 昵称 ★☆   输入文件:nickname.in   输出文件:nickname.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] ZSUQ送信者与腾讯QQ相似 ...

  7. COGS 36. 求和问题

    时间限制:1.2 s   内存限制:128 MB [问题描述]     在一个长度为n的整数数列中取出连续的若干个数,并求它们的和. [输入格式]     输入由若干行组成,第一行有一个整数n    ...

  8. SAP不同的产品是如何支持用户创建自定义字段的

    我们从SAP CRM,Cloud for Customer(简称C4C)和S/4HANA这三个产品分别来看看. SAP CRM 我们使用所谓的Application Enhancement Tool( ...

  9. 机器学习之-奇异值分解(SVD)原理详解及推导

    转载 http://blog.csdn.net/zhongkejingwang/article/details/43053513 在网上看到有很多文章介绍SVD的,讲的也都不错,但是感觉还是有需要补充 ...

  10. WPF中在后台实现控件样式

    加入现在有一个Button的样式如下: <Style TargetType="{x:Type Button}" x:Key="MyButton">. ...