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 ...
随机推荐
- nyoj 135 取石子(二) 【NIM】
取石子(二) 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描写叙述 小王喜欢与同事玩一些小游戏.今天他们选择了玩取石子. 游戏规则例如以下:共同拥有N堆石子.已知每堆中石子 ...
- Python操作MySQL:pymysql和SQLAlchemy
本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...
- 矩形嵌套-记忆化搜索(dp动态规划)
矩形嵌套 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描写叙述 有n个矩形,每个矩形能够用a,b来描写叙述,表示长和宽. 矩形X(a,b)能够嵌套在矩形Y(c,d)中当且仅 ...
- 谈谈 T 型人才
谈谈 T 型人才 昨天的图片发模糊了,正好我把这个话题展开聊一聊吧.这个话题是关于复合型人才的,我把它称作 T 型人才. 「全栈」工程师 前一段时间,「全栈」工程师的概念很火,不过大多数时候,「全 ...
- windows下gVim 中文显示为乱码
打开vimrc文件,在vim的安装目录下可以找到该文件: 或在windows下是在vim/gvim下输入:edit $vim/_vimrc. 在文件的末尾添加一句 "set fileenco ...
- jni集成第3方third party动态库libwebrtc_audio_preprocessing.so时android.mk的编写
现在要调用一个第3方库libwebrtc_audio_preprocessing.so 最终布局如下: 即创建2个文件夹,将第3方库放进去. include目录放第3方库的头文件 其中lib目录如下 ...
- STL algorihtm算法iter_swap(29)
iter_swap原型: std::iter_swap template <class ForwardIterator1, class ForwardIterator2> void ite ...
- SPOJ - LCS 后缀自动机入门
LCS - Longest Common Substring A string is finite sequence of characters over a non-empty finite set ...
- WEBRTC开发入门
WEBRTC "WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术,是谷歌2010年以6 ...
- Vue使用axios
main.js------------------- import axios from "axios"; import qs from "qs"; imp ...