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 ...
随机推荐
- mysql服务停止
mysql链接方式分为 tcp链接和 sock链接, 你刚才看到服务停止了还能链接 那种会员是 sock的会话模式 所以需要把所有链接mysql的进程结束掉,才能启动起来的 windows ...
- CrtmpServer getApplication注册流程
最近在研究 CrtmpServer getApplication注册流程,以备查阅 图1. 加载动态库流程 图2配置application流程
- sublime 汇总
此文内容有原创,还有各种其他博客抄来的经验,技巧,纯属个人使用心得. http://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html ...
- 宜人贷蜂巢ELK Stack之elasticsearch权限探索
前言 上文<宜人贷蜂巢API网关技术解密之Netty使用实践>提到了,API网关“承外对内”,将外部请求,转发到内部各个抓取服务.在网关中,不仅可以做鉴权.加解密.路由.限流功能:如果想了 ...
- ZOJ 1516 Uncle Tom's Inherited Land(二分匹配 最大匹配 匈牙利啊)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=516 Your old uncle Tom inherited a p ...
- Scala随记
使用Scala首先确保本地Java 8版本,然后按照官网所说,比较流行的方式(1) sbt; (2) IDE "The most popular way to get Scala is ei ...
- linux下修改主机名hostname方法(转载)
查看主机名: 在终端输入hostname 永久修改 第一步:#hostname oratest 第二步:修改/etc/sysconfig/network中的hostname 第三步:修改/etc/ho ...
- VC ++6.0英文版常用菜单使用参考【转载整理】
(1)File菜单 New:打开“new”对话框,以便创建新的文件.工程或工作区. Close Workspace:关闭与工作区相关的所有窗口. Exit:退出VC6环境,将提示保存窗口内容等. (2 ...
- 基于EasyIPCamera实现的数字网络摄像机IPCamera的模拟器IPC RTSP Simulator
还记得去年在北京安博会上,看到一些厂家的展示台上,各种船舶.公路.车辆的高清视频直播,好奇这些数据是怎么接到现场的,现场成百上千家展台,不可能有那么大的带宽供应,细想数据肯定不是实时的,果然,盯着看了 ...
- 什么是 AQS ?
1.什么是AQS? AQS是英文单词AbstractQueuedSynchronizer的缩写,翻译过来就是队列同步器. 它是构建锁或者其他同步组件的基础框架(如ReentrantLock.Reent ...