<!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. uvm_config_db——半个全局变量

    UVM中的配置机制uvm_config_db,uvm_config_db机制用于在UVM平台间传递参数.它们通常是成对出现的,set 寄信,而get函数是收信.config 机制大大提高了UVM的验证 ...

  2. Python实现1-9数组形成的结果为100的所有运算式

    问题: 编写一个在1,2,…,9(顺序不能变)数字之间插入+或-或什么都不插入,使得计算结果总是100的程序,并输出所有的可能性.例如:1 + 2 + 34–5 + 67–8 + 9 = 100. f ...

  3. Java面试题全集（下）

    这部分主要是开源Java EE框架方面的内容,包括hibernate.MyBatis.spring.Spring MVC等,由于Struts 2已经是明日黄花,在这里就不讨论Struts 2的面试题, ...

  4. Codeforces C The Game of Efil （暴力枚举状态）

    http://codeforces.com/gym/100650 阅读题,边界的cell的邻居要当成一个环形的来算,时间有8s,状态最多2^16种,所以直接暴力枚举就行了.另外一种做法是逆推. #in ...

  5. HDOJ 4509 湫湫系列故事——减肥记II（2013腾讯编程马拉松） 并查集合并区间

    发现这种合并区间的题目还可以这么玩 给你n段时间 然后问没被占用的时间是多少 题目所给的区间是右开的导致我wa 好多人5e5*1440的暴力跑出来的时间居然只是我的两倍 不懂.... 所以并查集并没有 ...

  6. Maven归纳

      一.常用功能 1.Maven的中央仓库 https://mvnrepository.com/ 2.添加jar包依赖 1.首先点击pom.xml,然后点击弹出页面中的Dependencies选项,接 ...

  7. Node.js连接mysql报加密方式错误解决方案

    本人在学习全栈开发过程中做一个Node的web项目在连接本地MySQL8.0版本的数据库时,发现Navicat连接不上,它报了一个数据库的加密方式导致连接不上的错误,错误如下: MySQL8.0版本的 ...

  8. DirectX9(翻译):介绍

    一.简介 二.DirectX Software Development Kit 这本帮助文档总共分为五大部分:DirectX Software Development Kit DirectX Grap ...

  9. Ckeditor for Drupal

      Ckeditor for Drupal   关于Drupal的所见即所得编辑器,Ckeditor是一个不错的选择,而且可以在Ckeditor官网直接下载到专为Drupal制作的版本: http:/ ...

  10. shell脚本，按单词出现频率降序排序。

    [root@localhost oldboy]# cat file the squid project provides a number of resources toassist users de ...