你的位置:首页 > Java教程

[Java教程]js如何获取指定元素的尺寸

js如何获取指定元素的尺寸:
在网页应用中,经常需要获得指定元素的尺寸,方法有多种,并且在不同的情况下需要用不同的方法,下面就简单介绍一下这方面的应用,希望能够给需要的朋友带来一定的帮助。
一.使用style属性:
使用style获取元素的尺寸,例如

 

<div style="width:100px;height:100px;"></div>

 

上面是一个div元素,下面就通过style获取它的尺寸值:

var thediv=document.getElementById("thediv");console.log(thediv.style.height);console.log(thediv.style.width);

以上代码可以输出div的高度和宽度。
需要注意的是,使用style获取的只能是使用这种形式设置的样式属性。
使用style可以获取元素的样式值,也可以设置元素样式属性值,例如:

 

thediv.style.height="200px"

 

以上代码可以div的高度设置为200px。
二.使用getComputedStyle()和currentStyle:
style虽然可以获得尺寸,但是不能够获取以下形式设置的样式:

 

#thediv{ width:100px; height:100px;}

 

通过内部样式表设置的属性。

<link rel="stylesheet" type="text/css" href="css.css" />

引入的外部样式表定义的元素属性。
以上两种方式定义的样式属性值,style属性就无法获取了,下面就只能够使用其他方式获取,这里就不多介绍了,具体可以参阅js如何获取非内部取样式表中定义的属性值一章节。
三.offsetWidth和offsetHeight属性获取:
使用offsetWidth和offsetHeight同样可以获取指定元素的尺寸,这里就不多介绍了,具体可以参阅scrollTop、offsetHeight和offsetTop等属性用法详解一章节。不过需要特别注意的是,上面两个属性的返回值是不带单位的。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9237

更多内容可以参阅:http://www.softwhy.com/javascript/