本文目录一览：
- 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’;
原创文章，作者：简单一点，如若转载，请注明出处：https://www.506064.com/n/127635.html
微信扫一扫 
支付宝扫一扫 