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 ...
随机推荐
- struts1.3中使用DispatchAction的一个问题
近期做项目发现我们公司的项目是用struts1写的,在多方百度下,总有理解了struts1.3的DispatchAction的使用方法 一:struts.xml文件的配置 <?xml versi ...
- mdadm
http://en.wikipedia.org/wiki/Mdadm mdadm From Wikipedia, the free encyclopedia mdadm Original au ...
- uboot下载地址
非常奇怪百度搜索都搜不到一个好的uboot下载的说明,仅此标记 HOME http://www.denx.de/wiki/U-Boot/SourceCode sourcecode http://www ...
- Unity3D总结:关于射线碰撞
方法一:Physics.Raycast 光线投射 1.static function Raycast (origin : Vector3, direction : Vector3, distance ...
- KVM技术
今天是周六,看到一片KVM相关的文章,感觉写得很不错,翻译了,原文在这里:KVM Technology 在开放服务器虚拟化的应用方面,KVM虚拟化技术近年来广受关注.自从2006年10月份诞生以来,其 ...
- php中屏蔽date的错误
php中添加 date_default_timezone_set('asia/shanghai'); 可以屏蔽 <?php echo date('Y-m-d',$row3['time']); ...
- 08 comet反向ajax
一:HTTP协议与技久链接+分块传输---->反向ajax 反向ajax又叫comet, server push,服务器推技术. 应用范围: 网页聊天服务器,, 新浪微博在线聊天,google ...
- Struts2拦截器 解决登录问题
一.了解Struts2 拦截器[Interceptor] 拦截器的工作原理如图 拦截器是由每一个action请求(request)都包装在一系列的拦截器的内部,通过redirectAction再一次 ...
- Rest Api(转载)
来源:http://www.cnblogs.com/springyangwc/archive/2012/01/18/2325784.html 概述 REST 从资源的角度来观察整个网络,分布在各处的资 ...
- 【TensorFlow-windows】(二) 实现一个去噪自编码器
主要内容: 1.自编码器的TensorFlow实现代码(详细代码注释) 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_6 ...