<!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. Hibernate框架关系映射一对多双向关联

    直入主题,首先大配置常规配置, 这里住要说关联关系,大配置不多少,而且jar包默认添加好,笔者用的是idea2016. 然后我们知道关联关系主要是在小配置添加节点来配置属性.个人认为关联映射,就是对应 ...

  2. selenium-Python之进行文件的上传和下载文件

    在利用Selenium进行批量上传文件时,遇到如下的Windows窗口进行上传.下载操作时,可以通过pywinauto进行操作.上传窗口如下 使用pywinauto,需知Windows窗口控件的cla ...

  3. codeforces 121 E. Lucky Array

    time limit per test 4 seconds memory limit per test 256 megabytes input standard input output standa ...

  4. codevs 2776 寻找代表元

     时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold     题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用1到n编号.广州二中苏元实验 ...

  5. 自学Spring Boot

    简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配 ...

  6. 【原创】最有效解决IE8 position兼容性问题

    看了网上的的帖子真是水的一塌糊涂,完全没有解决我和广大网友们的关于ie8下position兼容性问题. 网上有的技术我就不说了 ,大家自行搜索,我想说的重点是 ie8不支持html5的新标签.这是重点 ...

  7. 浏览器输入一个url到整个页面显示出来经历了哪些过程？

    https://cloud.tencent.com/developer/article/1396399 https://www.cnblogs.com/haonanZhang/p/6362233.ht ...

  8. C#编写高并发数据库控制

    往往大数据量,高并发时, 瓶颈都在数据库上, 好多人都说用数据库的复制,发布, 读写分离等技术, 但主从数据库之间同步时间有延迟.代码的作用在于保证在上端缓存服务失效(一般来说概率比较低)时,形成倒瓶 ...

  9. _IO_FILE

    hctf2017的babyprintf解法是house of orange,深入学习了一下,牵扯出许多知识,这里先进行第一步:_IO_FILE结构 0x00 _IO_FILE glibc-2.2.1\ ...

  10. Flask——基础知识

    Flask应用程序 一个简单的Flask应用程序 # 导入flask程序 from flask import Flask # 初始化flask对象 app = Flask(__name__) # 装饰 ...