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’;