02-offsetLeft和offsetTop

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

  

时间: 2024-10-11 20:36:32

02-offsetLeft和offsetTop的相关文章

offsetleft、offsetTop、offsetParent的兼容性问题

先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各浏

offsetLeft与offsetTop详解

offsetLeft与offsetTop使用方法一样,只是一个是找距离定位父级(position:relative)左边的距离,一个是找距离定位父级上边的距离 没有定位则找body,我们还是看看ie7以下的情况吧. 先看div都设置了宽高的情况: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

js 位置属性offsetLeft,offsetTop,scrollLeft,scrollTop等测试

一直对这几个属性,有点模糊,今天有时间,好好研究一下. 一下上网上前辈写的关于这方面的博客链接: http://blog.csdn.net/wgw335363240/article/details/5580654 http://blog.csdn.net/fswan/article/details/17238933 看了几篇之后,有点小懂,还是亲身测试一下比较好,实践是检验真理的唯一标准.嘿嘿!! 下面是我写的demo的截图.这个demo上列出了,js的常用位置属性,可以拖拽.缩放元素,来观察各

offesetHeight,offsetWidth; offsetLeft,offsetTop

1.offsetHeight 属性返回一个整数,表示元素的css高度 包括padding和border以及滚动条: offsetWidth 同上表示宽度. 只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度.如果元素的 CSS 设为不可见(比如display: none;),则返回0. 注意:这两个属性都是只读属性 2.offsetLeft 和offsetTop 表示理他最近的并且包含(position)父元素的位移: 原文地址:https:

盒子 offsetLeft、offsetTop、offsetWidth 等属性解释

offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算 offsetTop 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算 offsetWidth 获取盒子的 宽

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offsetheight等等)以及dom中的坐标讨论

最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的不好或者写错了,欢迎各位指正.好了废话不多说,开始进入主题. 这篇文章主要讨论两点: 一.DOM中各种宽度.高度 二.DOM中的坐标系 下面我们看看DOM中都有一些什么宽度.高度. 常见的 offsetWidth clientWidth scrollWidth offsetHeight client

深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级

offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight

offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度,内边距,(可见的)水平滚动条的高度,上下边框的高度. offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离 offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离 offsetParent: 保存着包含元素的引用 注意: 1.当对象的offsetParent属性指向

offsetTop、offsetLeft、offsetWidth、offsetHeight 【赞】

假设 obj 为某个 HTML 控件. offsetTop.offsetLeft obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素.具体算法请参见 offsetTop.offsetLeft 算法. obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. offsetWidth.offsetHeight obj.offsetWidth 指 o

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth