<!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. Eclipse中一直出现 Android SDK resolving error markers

    Eclipse中一直出现“Android SDK: resolving error markers”. 此类情况网上有诸多描述以及相应尝试性的解决方法,不久前本人即出现此类情况,尝试多种方案后未能解决 ...

  2. iOS --runtime理解

    iOS~runtime理解 Runtime是想要做好iOS开发,或者说是真正的深刻的掌握OC这门语言所必需理解的东西.最近在学习Runtime,有自己的一些心得,整理如下,一为 查阅方便二为 或许能给 ...

  3. GreenDao3.2的使用

    原文:http://blog.csdn.net/qq_30379689/article/details/54410838 GreenDao3.2的使用,爱不释手 本篇文章包括以下内容: 前言 Gree ...

  4. 【R语言进行数据挖掘】回归分析

    1.线性回归 线性回归就是使用下面的预测函数预测未来观测量: 其中,x1,x2,...,xk都是预测变量(影响预测的因素),y是需要预测的目标变量(被预测变量). 线性回归模型的数据来源于澳大利亚的C ...

  5. Yii2中多表关联查询（with、join、joinwith)

    表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer   (id  customer_name) 订单表Order         (id  order_name   custome ...

  6. leecode 旋转数组

    描述 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] 解释: 向右旋 ...

  7. Linux OpenGL 实践篇-14-多实例渲染

    多实例渲染 OpenGL的多实例渲染是一种连续执行多条相同的渲染命令的方法,并且每条命令产生的结果都有轻微的差异,通常用于渲染大量的几何物体. 设想一个场景,比如太空,我们需要渲染数以万记的星球,如果 ...

  8. chm文件帮助功能全解

    在winform中点击某个按钮弹出关于这个窗体的功能的具体解释文档方法如下: 第一步,使用chm编译工具修改chm每个文档的url 修改完成后保存确认能否打开, 如果不能就使用这个软件的转换功能把ch ...

  9. android-menudrawer-master 使用

    1. 参照例子写, 运行总崩溃, 多半是导库问题... 2. 既然这样不行, 只好将源码全部拷贝到工程中了. 然后修错误, (将需要的res 文件复制过来.主要是value中的几个文件) 3. 在Ma ...

  10. Kernel Stack Overflow（转）

    0x00 漏洞代码 stack_smashing.c #include <linux/init.h> #include <linux/module.h> #include &l ...