1.

obj.clientWidth //获取元素的宽度

obj.clientHeight //元素的高度

obj.offsetLeft //元素相对于父元素的left

obj.offsetTop //元素相对于父元素的top

obj.offsetWidth //元素的宽度

obj.offsetHeight //元素的高度

区别:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = width + padding + border offset比client多了border的宽度

//获取元素的纵坐标(相对于窗口)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
} //获取元素的横坐标(相对于窗口)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

JS获取元素的offsetTop,offsetLeft等相关属性的更多相关文章

  1. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

  2. 【全面总结】js获取元素位置大小

    [js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...

  3. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

  4. js获取元素提示信息

    js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...

  5. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  6. js获取元素显示隐藏的当前状态

    js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...

  7. js获取元素的外链样式

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...

  8. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  9. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

随机推荐

  1. 微博达人硅谷之歌:Testin云測移动搜索性能測试非常是让人信服

    微博达人硅谷之歌:Testin云測移动搜索性能測试非常是让人信服 2014/10/08 · Testin · 开发人员訪谈 2013年11月1日,谷歌运行董事长施密特(Eric Emerson Sch ...

  2. python訪问redis

    python訪问redis 1 Linux上安装redis a) 下载 $ wget http://download.redis.io/releases/redis-3.0.5.tar.gz b) 编 ...

  3. git+jenkins

    开发写代码的演变 一个开发单打独斗,撸代码,开发网站,自由自在 多个开发同时开发一个网站,同时改一份代码.但是同时改一个文件会导致冲突 分支结构,每天上班第一件事克隆代码,下班前最后一件事合并代码 好 ...

  4. C# 之 集合ArrayList

    .NET Framework提供了用于数据存储和检索的专用类,这些类统称集合. 这些类提供对堆栈.队列.列表和哈希表的支持.大多数集合类实现系统的接口.以下我们主要来讲一下ArrayList.     ...

  5. 如何求文件File的字节数

      [java]代码库 import java.io.*;   /**  * 获取文件的字节数  */   class FileInputStreamS {     public static voi ...

  6. RFID 卡片防复制

    RFID 卡片防复制 这里的卡指的 MIFARE Classic 系列 或 NTAG 系列的卡.其它的卡没接触过,不了解. 防伪有两层意义: 卡片防复制.比如小区卡被复制,使得出入小区的人员管理更困难 ...

  7. PythonCookBook笔记——数字日期和时间

    数字日期和时间 数字的四舍五入 用round函数,指定值和小数位数. >>> round(1.23, 1) 1.2 >>> round(1.27, 1) 1.3 & ...

  8. 搭建React Native开发环境

    搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...

  9. 程序员必知的8大排序(java实现)

    先来看看8种排序之间的关系:

  10. Redis 分布式锁的正确实现方式(转)

    _ 前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各 ...