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 ...
随机推荐
- ssm 网页
http://stackoverflow.com/questions/14545872/bean-named-xxx-must-be-of-typexxx-but-was-actually-of-ty ...
- eclipse工具栏sdk和avd图标
打开菜单Window -> Customize Perspective -> Command Groups Availability -> 勾选Android SDK and AVD ...
- Mysql启动自己主动设置max_connections为其它值
背景 有同学反应.产品连不上,登陆到server.发现连接数不够了. 接着先重新启动mysql,发如今mysql启动的时候会报Waring Warning Changed limits: max_op ...
- Android创建和使用数据库
一.关系型数据库SQLIte 每一个应用程序都要使用数据.Android应用程序也不例外,Android使用开源的.与操作系统无关的SQL数据库-SQLite. SQLite第一个Al ...
- Django缓存问题
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...
- linux c 网络编程:用域名获取IP地址或者用IP获取域名 网络地址转换成整型 主机字符顺序与网络字节顺序的转换
用域名获取IP地址或者用IP获取域名 #include<stdio.h> #include<sys/socket.h> #include<netdb.h> int ...
- Oracle操作笔记
1.查询Oracle版本,数据库的SID select * from v$version; select name from v$database; 2.查询Oracle数据库所支持的功能 SELEC ...
- 第 2 章 第 9 题 顺序 & 二分搜索效率分析问题
问题分析 顺序搜索的时间复杂度是O( n ),二分搜索的时间复杂度级别是O( lgn ).但这并不代表二分的时间开销就一定比顺序的小,因为二分搜索有个前提:元素必须要是有序的.如果仅仅为了二分搜索几个 ...
- 自定义 spinner
http://blog.sina.com.cn/s/blog_3e333c4a010151cj.html
- EasyDarwin手机直播是如何实现的快速显示视频的方法
前言 经常有人提到最近比较火的映客直播.花椒直播这种,是如何做到在打开手机直播中的某一个主播房间后,立即就能显示出主播视频,非常非常快,而且延时也比较小,是怎么做到的? 其实,这并不是什么高深的技术, ...