获取dom元素的宽度和高度
来源:互联网 发布:2016淘宝评价计分规则 编辑:程序博客网 时间:2024/05/12 05:44
获取dom元素的宽度和高度
一、获取css的大小
1.第一种通过内联样式
var box = document.getElementById('box');var w = box.style.width;var h = box.style.height;
2.通过计算元素的大小(但是在ie情况下有一个问题,那就没写widht和height的css就返回auto);
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;var w = style.width;var h = style.height;
3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素大小(但是无法获得计算的样式)
var sheet = document.styleSheets[0];var rule = (sheet.cssRules || sheet.rules)[0];var w = rule.style.width;var h = rule.style.height;
以上三种方法都不行。
二、获取实际的大小
1.clientWidth和clientHeight
var w = box.clientWidth;var h = box.clientHeight;
说明:padding和scroll变动,才有变化
2.scrollWidth 和box.scrollHeight;
var w = box.scrollWidth;var h = box.scrollHeight;
说明,1)border变化,不同浏览器有不同变化2)padding变化,有变化3)margin变化,无变化
3.offsetWidth和offsetHeight
var w = box.scrollWidth;var h = box.scrollHeight;
说明,padding和border有变动,才有变化
三、获取元素周变的距离(原本只能从左边和上边)
1.clientLeft 和 clientTop
这组属性可以获取元素设置了左边框和上边框的大小。
var l = box.clientLeft;var t = box.clientTop;
2.获取相对父级元素的位置
var l = box.offsetLeft;var t = box.offsetTop;var parent = box.offsetParent; //获取伏击元素,返回body
说明,如果没有position:absolute;如果每个浏览器有不同解释
那么获取多层中的元素到body或html的距离,代码如下:
复制代码
function offsetLeft(element){
var left = element.offsetLeft;
var parent = element.offsetParent;
while(parent!== null){ left += parent.offsetLeft; parent = parent.offsetParent; } return left;}
复制代码
3.
//这组属性可以获取滚动条被隐藏的区域大小,也可设置定位到该区域。
box.scrollTop; //获取滚动内容上方的位置
box.scrollLeft; //获取滚动内容左方的位置
- 获取dom元素的宽度和高度
- javascript中获取dom元素的高度和宽度
- DOM元素的各种宽度和高度
- js 获取dom的高度和宽度
- 定位 获取元素的宽度和高度
- javascript中获取dom元素高度和宽度的方法如下:
- 获取任意一个元素的高度和宽度
- js获取网页和元素的宽度、高度
- js如何获取元素的宽度和高度
- jquery获取隐藏元素的宽度高度
- js 获取元素的高度或者宽度。
- JS:获取元素宽度高度
- js获取元素高度、宽度
- javascript获取隐藏元素(display:none)的高度和宽度的方法(转)
- 获取图片宽度和高度的类
- 获取CBitmap的宽度和高度
- CSS----获取DIV的高度和宽度
- javaScript获取窗口的高度和宽度
- opencv图像处理:CommandLineParser类
- 为什么会有面向对象编程的产生?从结构编程成说起
- 杭电oj1089 最简单的加法
- RAID磁盘阵列 及RAID0 1 3 5
- vc6.0常见错误fatal error C1083: Cannot open precompiled header file: 'Debug/**.pch'
- 获取dom元素的宽度和高度
- 黑白树
- String、StringBuilder、StringBuffer三者的区别和联系
- java 中的单例模式
- Python学习笔记——列表
- JS数据结构之---数组
- 框架学习之springMVC整合框架-01基础、访问servletAPI、json
- Java面向对象-类与对象以及内存图解
- Birthday Paradox ||生日悖论