本文目录一览:
- 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';