js设置class高度（js设置元素宽度和高度）

本文目录一览：

• 1、javascript如何获取div的class中设置的宽高度?
• 2、JS能否获取动态class的宽度并赋值给高度，目的是实现响应式正方形，附HTML和CSS
• 3、怎么设置div的class高度等于另一个div的id的高度一样

javascript如何获取div的class中设置的宽高度?

javascript获取div的class中设置的宽高度：

高度（offsetHeight）：

headtitle用js获取div的高度/title/head

style  type=”text/css”

#box{border:1px solid #ff0000;width:200px; }

/style

script language=”javascript”

function jj(){

var pp=document.getElementById(“box”).offsetHeight;

alert(pp);

}

/script

body

div id=”box”

p段落内容…../pp段落内容…../p

input type=”button” onclick=”jj();” value=”click”

/div

/body

宽度（offsetWidth）：

headtitle用js获取div的高度/title/head

style  type=”text/css”

#box{border:1px solid #ff0000;width:200px; }

/style

script language=”javascript”

function jj(){

var pp=document.getElementById(“box”).offsetWidth;

alert(pp);

}

/script

body

div id=”box”

p段落内容…../pp段落内容…../p

input type=”button” onclick=”jj();” value=”click”

/div

/body

JS能否获取动态class的宽度并赋值给高度，目的是实现响应式正方形，附HTML和CSS

你这样的写的话 不先赋值给thumbnail统一的高度的话恐怕页面会显得参差不齐而不是你想的4块模块平均撑开页面，还有你是把图片写进div你当背景，那就不需要js来处理这个问题。

style

#thumbnailbox{position: absolute;left:0;top:0;width:100%;height:100%;}

#thumbnailbox a{width:50%;height:50%;display:block;position:absolute;left:0;top:0;}

#thumbnailbox a.bg1{background:url(../images/1.jpg) 50% 50% no-repeat;}

#thumbnailbox a.bg2{left:50%;background:url(../images/2.jpg) 50% 50% no-repeat;}

#thumbnailbox a.bg3{top:50%;background:url(../images/3.jpg) 50% 50% no-repeat;}

#thumbnailbox a.bg4{left:50%;top:50%;background:url(../images/4.jpg) 50% 50% no-repeat;}

/style

div id=”thumbnailbox”

a href=”post_1.html” title=”缩略图1″ class=”thumbnail bg1″/a

a href=”post_1.html” title=”缩略图1″ class=”thumbnail bg2″/a

a href=”post_1.html” title=”缩略图1″ class=”thumbnail bg3″/a

a href=”post_1.html” title=”缩略图1″ class=”thumbnail bg4″/a

/div

怎么设置div的class高度等于另一个div的id的高度一样

 这个只能用js来控制：

 获取id为hidden元素的高度

 var height = document.getElementById(“hidden”).offsetHeight;

 把获取到的高度设置给class类名为zuobian的元素

 document.getElementsByClassName(“zuobian “)[0].style.height = height + ‘px’;