首页 > 编程知识 正文

js设置class高度(js设置元素宽度和高度)

时间:2023-11-29 19:12:36 阅读:310336 作者:BMCX

本文目录一览:

  • 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';

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。