<!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. Django中多表的增删改查操作及聚合查询、F、Q查询

    一.创建表 创建四个表:书籍,出版社,作者,作者详细信息 四个表之间关系:书籍和作者多对多,作者和作者详细信息一对一,出版社和书籍一对多 创建一对一的关系:OneToOne("要绑定关系的表 ...

  2. P1791 线段覆盖

    题目描述 已知数轴上0<N<10000条线段.每条线段按照端点Ai和Bi(Ai<>Bi,i=1..N)定义.端点坐标在(-999,999)内,坐标为整数.有些线段可能相交.编程 ...

  3. IOS命名

    NS开头的名称不要出现. NS系统名称开头. 命名缩写只用于通用专业术语,如URL,不可自创命名缩写,如Ctr.Msg.命名宁可长一些,也不要难于理解. 是否在看别人代码时各种缩写而不知其所以然?简短 ...

  4. SVN几个重要的问题

    本文不是系统地讲解SVN,只是对SVN中一些重要的或者笔者一直混淆的问题做简要归纳. SVN的安装可以参考笔者的另一篇技术随笔<SVN安装使用小结>. 1.既然能够通过SVN得到“每一个版 ...

  5. DRP项目

    DRP(distribution resource planning)分销资源计划是管理企业的分销网络的系统,目的是使企业具有对订单和供货具有快速反应和持续补充库存的能力.解决了随着企业销售规模的逐渐 ...

  6. POJ 1741 Tree （树的分治，树的重心）

    题意:给一棵树,n个节点,给定一个数k,求任意满足dist(a,b)<=k的点对的数量. 思路: 这道题的思路比较简单,但是细节很多. 此题可以用分治法,如何分治? (1)如果path(a,b) ...

  7. httpmodule初识

    .net的请求流程: HttpRequest-->inetinfo.exe->ASPNET_ISAPI.DLL-->Http Pipeline-->ASPNET_WP.EXE- ...

  8. Data truncation: Data too long for column 'id' at row 1

    Caused by: java.sql.BatchUpdateException: Data truncation: Data too long for column 'titleimg' at ro ...

  9. 服务器配置iis,php网站

    1.在iis中选择物理路径.配置域名 2.添加php默认文档 3.修改处理程序映射 4.设置模块映射信息

  10. C语言特点_01

    C语言特点: 1.C语言的32个关键字 auto 局部变量(自动储存) break 无条件退出程序最内层循环 case switch语句中选择项 char 单字节整型数据 const 定义不可更改的常 ...