如何使用JavaScript设置动态CSS值

我想在我的页面上为

div

添加响应性填充。 它应该是自身高度的五分之一，该高度在变量

cover\u height

中

这是我到目前为止的方法，它是根据一个答案， 但它不会改变填充顶部的方式：

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

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

任何关于代码的反馈都是受欢迎的，因为我对JS非常陌生。

JavaScript（香草版）没有

元素。据我所知，高度

功能。它应该是或取决于你在寻找什么

offsetHeight

返回高度，包括边框、填充和滚动条

var cover=document.getElementById（“cover”）；
var cover_height=cover.clientHeight；
封面样式[“衬垫顶部”]=封面高度/5+“px”
#封面{
高度：300px；
背景：红色；
}

您应该使用
clientHeight
或
offsetHeight
而不是
height


clientHeight：包括高度和垂直填充

离视：包括高度、垂直填充和垂直边框


例如：

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

cover.style.paddingTop = cover_height / 5 + "px";

希望这有帮助



var cover=document.getElementById（“cover”）；
var cover_height=cover.clientHeight；
cover.style.paddingTop=封盖高度/5+“px”
#封面{
宽度：200px；
高度：200px；
背景颜色：绿色；
}

封面
是在我为这个问题更改它之前。但是我忘了添加
文档。
在它前面。将进行编辑。很抱歉造成混淆。请尝试cover.style.paddingTop=cover\u height/5+“px”；（盖板高度/5）+“px”；顺便说一下，据我所知，JS没有
.height
。它应该是
clientHeight
（或者
style.height
，如果高度是通过内联样式设置的）。除此之外，我没有看到其他错误。
clientHeight
成功了！谢谢你，哈利。这正是我想要的！如果我想问：这种生成响应性设计的方法有意义吗？@Flip：如果您希望根据元素的宽度设置填充，我会推荐纯CSS，因为默认情况下填充的百分比值就是这样工作的。但就身高而言，我认为你的方法相当不错。让我再想想。