<!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);

</script>

</body>

</html>

　　

02-offsetLeft和offsetTop的更多相关文章

  1. offsetLeft与offsetTop详解

    offsetLeft与offsetTop使用方法一样,只是一个是找距离定位父级(position:relative)左边的距离,一个是找距离定位父级上边的距离 没有定位则找body,我们还是看看ie7 ...

  2. offsetleft、offsetTop、offsetParent的兼容性问题

    先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...

  3. 简单理解offsetleft、offsetTop、offsetParent

    先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个 ...

  4. 【JavaScript】全面解析offsetLeft、offsetTop

    假设 obj 为某个 HTML 控件.obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素. obj.offsetRight 指 obj 距离右方或上层控件的位置,整型, ...

  5. 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight

    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...

  6. 盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

    offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将 ...

  7. 【转】获取到元素的 offsetLeft 、offsetTop属性不正常的解决方法。

    原地址:http://hi.baidu.com/huidust520/item/85da006981a6c635ad3e834e 我在工作中遇到个问题: 在ie7下和360浏览器下获取到的  offs ...

  8. HTMLElement.offsetParent（offsetLeft和offsetTop参照offsetParent的内边距边界）

    IE7以上(不是火狐): 父级没有定位: 本身没有定位: ==> offsetParent:body 本身定位为:absolute/relative: ==> offsetParent:b ...

  9. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  10. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

随机推荐

  1. JavaScript中，关于class的调用

    PS:class的调用,其实是可以叠加的,当然了这要求样式不同的情况下,如果样式相同,则后一个样式会覆盖前一个样式. 1.举例如下: <div id="test" class ...

  2. Somethings about Floors题解

    题目内容:一个楼梯有N级(N >=0), 每次走1级或2级, 从底走到顶一共有多少种走法? 输入要求:只有一行输入,并且只有一个数N(如果N > 20,则N = N%21,即保证N的范围控 ...

  3. 国内的Jquery CDN免费服务

    Jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影.很多网站都喜欢采用一些Jquery CDN加速服务,这样网站加载jquery会更快.之前火端网络的一些网站都是使用Google的jq ...

  4. Xmind几个有用的技巧

    Xmind是一个很好的思维导图工具,是学习研究总结的好帮手. Xmind功能很丰富,这里只是简要列出几个比较有用的技巧. 1.善用属性 选中一个xmind元素(专业名词叫[主题])后,一般在右下角会出 ...

  5. MySQL主从复制原理介绍

    1)在mysql主库上,将改变记录到二进制日志(binary log)中. 2)在mysql从库上,IO线程将mysql主库上二进制日志(binary log)复制到中继日志(replay log)中 ...

  6. COGS 1913. AC自动机

    ★★   输入文件:ACautomata.in   输出文件:ACautomata.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 对,这就是裸的AC自动机. 要求:在 ...

  7. java读取clob字段的几种方法（转）

    http://blog.csdn.net/tanksyg/article/details/49927897 第一种 Clob clob = rs.getClob("remark") ...

  8. 如何实现第二窗口不显示在windows下面的任务栏中

    将要隐藏的窗体的的ShowInTaskBar属性设置为false;就好了

  9. 【page-monitor 前端自动化 上篇】初步调研

    转载文章:来源(靠谱崔小拽) 前端自动化测试主要在于:变化快,不稳定,兼容性复杂:故而,想通过较低的成本维护较为通用的自动化case比较困难.本文旨在通过page-monitor获取和分析dom结构, ...

  10. MAC实现睡眠和休眠唤醒

    因为苹果默认为休眠文件加密,Clover 是无法解密的.所以需要经过一些设置才能破除这无节操的加密文件sleepimage.在这之前不得不提下EmuVariableUefi-64.efi 这个驱动.我 ...