如何使用JavaScript设置动态CSS值

Question

我希望div在我的页面上有响应填充.它应该是height变量中的五分之一cover_height.

到目前为止,这是我的方法,这是对这个问题的回答,但它没有改变padding-top:

var cover = document.getElementById("cover");
var cover_height = cover.height;    

cover.style["padding-top"] = cover_height / 5 + "px";

任何关于代码的反馈都是受欢迎的,因为我对JS很新.

Answer 1

element.height据我所知,JavaScript(vanilla)没有功能.它应该是.clientHeight或.offsetHeight取决于你在寻找什么.offsetHeight返回包括边框,填充和滚动条在内的高度.

var cover = document.getElementById("cover");
var cover_height = cover.clientHeight;

cover.style["padding-top"] = cover_height / 5 + "px";

#cover {
  height: 300px;
  background: red;
}

<div id='cover'></div>

这种响应式设计的方法是否有意义？

如果您可以使用基于固定视口单位的值,height那么我会推荐类似下面的代码段.这里元素的高度根据视口的高度增加(或减少),并且padding-top始终是高度的1/5.例如,如果视口高度为100px,则元素的高度为30px,填充顶部为6px.

#cover {
  height: 30vh;
  background: red;
  padding-top: 6vh;
}

<div id='cover'></div>

如果您不能使用视口单元(或),则元素的高度为自动,并且会根据内容增加或减少,那么您的方法相当适合设置padding-top.

如果您想padding-top根据元素父级的宽度进行设置,那么我建议使用百分比值使用纯CSS.这是因为padding或者margin总是根据元素的宽度计算百分比值.此行为的一个exampe,请点击这里.