JavaScript 怎么获取元素的宽度 ？

JavaScript037

JavaScript 怎么获取元素的宽度 ？,第1张

javascript获取元素的高度：

var obj = document.getElementById("test")

alert(obj.height + "\n" + obj.width)

// 200px 200px typeof=string只是将style属性中的值显示出来

扩展：

获取元素的实际大小

clientWidth和clientHeight

这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：

a. 增加边框，无变化；

b. 增加外边距，无变化；

c. 增加滚动条，最终值等于原本大小减去滚动条的大小；

d. 增加内边距，最终值等于原本大小加上内边距的大小；

放的位置不对吧，没问题。

<style type="text/css">

.main{width:500px}

#box{float:leftwidth:200pxbackground-color:#06F}

#right{float:rightwidth:200pxbackground-color:#F90}

</style>

<div class="main">

<div id="box">1</div>

<div id="right"><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p><p>2</p></div>

</div>

<script type="text/javascript">

document.getElementById("box").style.height = document.getElementById("right").scrollHeight + 20 + 'px'

</script>

你这个问题，不就是不想写两遍同样的css样式么，

把ID换成class不行，因为js没法通过class控制div的属性

你可以id和class一起写啊，id用于js调用，class用来写样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

if (document.getElementById){

target=document.getElementById(targetid)

if (target.style.display=="block"){

target.style.display="none"

} else {

target.style.display="block"

}

}

}

-->

</script>

<style type="text/css">

.div{ border:1px #06F solidheight:50pxwidth:100pxdisplay:none}

a { display:block}

</style>

</head>

<body>

<a href="#" onclick="toggle('div1')">显示/隐藏</a>

<div id="div1" class="div"></div>

<a href="#" onclick="toggle('div2')">显示/隐藏</a>

<div id="div2" class="div"></div>

</body>

</html>

这样不就可以了么