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>
这样不就可以了么