JS获取元素的offsetTop,offsetLeft等相关属性
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等相关属性的更多相关文章
- js获取元素宽高、位置相关知识汇总
常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- js获取元素提示信息
js获取元素提示信息 var date=$("#date").attr('placeholder'); js修改元素的提示信息 $("#date").attr( ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- js获取元素显示隐藏的当前状态
js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- js 获取元素坐标 和鼠标点击坐标
js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...
随机推荐
- mediawiki 管理员/行政员设置
mediawiki行政员找回 mediawiki 1.22.6默认安装完毕后,无管理员/行政员.默认都是user组成员.这样不便于wiki系统维护. 注: 默认情况下.行政员组(bureaucrat) ...
- Android异步载入AsyncTask具体解释
曾看见有人说过.认为非常有道理.分享一下: 技术分为术和道两种: (1)具体做事的方法是术. (2)做事的原理和原则是道. 近期项目发现个重大问题.结果打log跟踪查是AsyncTask导 ...
- 详谈kubernetes滚动更新-1
系列目录 这个系列分为两个小节,第一个小节介绍deployment滚动更新时,deployment.replicaset.pod的细节以及创建过程以及deployment版本管理的方式 第二个小节将介 ...
- java 文件的写入和读取
//写入操作 方法1 OutputStream f = new FileOutputStream("C:/j/j.txt"); f.write("aaaaaaa" ...
- SpringMVC学习(一):搭建SpringMVC-注解-非注解
文章参考:http://www.cnblogs.com/Sinte-Beuve/p/5730553.html 一.环境搭建: 目录结构: 引用的JAR包: 如果是Maven搭建的话pom.xml配置依 ...
- PHP获取IP
<?php $iipp = $_SERVER["REMOTE_ADDR"]; echo $iipp ; ?>
- Android判断TextView是否超出加省略号
我们都知道通过指定android:ellipsize="end" android:singleLine="true" 可以让TextView自动截断超出部分并且 ...
- IOS8 通知中心(Notification Center)新特性
本文转载至 http://blog.csdn.net/jinkaiouyang/article/details/30029441 ios手机apple通知中心notificationCenter ...
- 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< ...
- 使用 QWorker 做为计划任务引擎
QWorker 提供了 Plan 函数来提供计划任务功能的支持.每个任务做为一个作业,可以在指定的时间点被触发执行.而 cron 作为 Linux 操作系统下计划任务的标准被广大用户所熟知,QWork ...