<!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. let和const注意点

    let 一.块级作用域 下面的代码如果使用var,最后输出的是10. var a = []; for (var i = 0; i < 10; i++) { a[i] = function () ...

  2. 使用POI创建word表格合并单元格兼容wps

    poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...

  3. Selenium私房菜系列9 -- Selenium RC服务器命令行参数列表【ZZ】

    本文转载自:http://wiki.javascud.org/display/SEL/Selenium+Remote+Control+-+options 使用示例: java -jar seleniu ...

  4. make与makefile的几个例子和（自己写一下，汗！忘记了！）总结

    共用的几个源代码文件: main.c 2.c 3.c 代码依次为: #include<stdlib.h> #include "a.h" extern void func ...

  5. iOS 随机数(Fixed)

    ios 有如下三种随机数方法: 1.    srand((unsigned)time(0));  //不加这句每次产生的随机数不变         int i = rand() % 5; 2.     ...

  6. C++基础：虚函数、重载、覆盖、隐藏<转>

    转自:http://www.2cto.com/kf/201404/291772.html 虚函数总是跟多态联系在一起,引入虚函数可以使用基类指针对继承类对象进行操作! 虚函数:继承接口(函数名,参数, ...

  7. Airbnb：别抵制我，宝宝要过 10 岁生日

    今日导读 喜欢旅游的你,一定听说或使用过 airbnb(爱彼迎),在出发前打开它,总是能通过它开始一段奇妙的旅行.可是最近,就在这个打着“共享家”概念的服务型网站正迎来十周年之际,它却遭到了很多国家的 ...

  8. MAC进入文件夹快捷键

    common + O common+up common+Down shift + common +G

  9. C-基础：atoi

    C语言库函数名: atoi 功 能: 把字符串转换成整型数. 名字来源:ASCII to integer 的缩写. 原型: int atoi(const char *nptr); 函数说明: 参数np ...

  10. pytorch中的view

    https://ptorch.com/news/59.html view()相当于reshape(),其中参数若为-1表示当前的size根据其余size推断