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. mediawiki 管理员/行政员设置

    mediawiki行政员找回 mediawiki 1.22.6默认安装完毕后,无管理员/行政员.默认都是user组成员.这样不便于wiki系统维护. 注: 默认情况下.行政员组(bureaucrat) ...

  2. Android异步载入AsyncTask具体解释

    曾看见有人说过.认为非常有道理.分享一下:   技术分为术和道两种:   (1)具体做事的方法是术.   (2)做事的原理和原则是道. 近期项目发现个重大问题.结果打log跟踪查是AsyncTask导 ...

  3. 详谈kubernetes滚动更新-1

    系列目录 这个系列分为两个小节,第一个小节介绍deployment滚动更新时,deployment.replicaset.pod的细节以及创建过程以及deployment版本管理的方式 第二个小节将介 ...

  4. java 文件的写入和读取

    //写入操作 方法1 OutputStream f = new FileOutputStream("C:/j/j.txt"); f.write("aaaaaaa" ...

  5. SpringMVC学习(一):搭建SpringMVC-注解-非注解

    文章参考:http://www.cnblogs.com/Sinte-Beuve/p/5730553.html 一.环境搭建: 目录结构: 引用的JAR包: 如果是Maven搭建的话pom.xml配置依 ...

  6. PHP获取IP

    <?php $iipp = $_SERVER["REMOTE_ADDR"]; echo $iipp ; ?>

  7. Android判断TextView是否超出加省略号

    我们都知道通过指定android:ellipsize="end" android:singleLine="true" 可以让TextView自动截断超出部分并且 ...

  8. IOS8 通知中心(Notification Center)新特性

     本文转载至 http://blog.csdn.net/jinkaiouyang/article/details/30029441   ios手机apple通知中心notificationCenter ...

  9. zoj 2271 Chance to Encounter a Girl <概率DP>

    题目: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2271 题意:一个N*N的矩阵( N = 2*k-1 , k< ...

  10. 使用 QWorker 做为计划任务引擎

    QWorker 提供了 Plan 函数来提供计划任务功能的支持.每个任务做为一个作业,可以在指定的时间点被触发执行.而 cron 作为 Linux 操作系统下计划任务的标准被广大用户所熟知,QWork ...