如何使用 JavaScript 设置动态 CSS 值答案

【问题标题】：How to set a dynamic CSS value with JavaScript如何使用 JavaScript 设置动态 CSS 值
【发布时间】：2016-06-10 17:47:57
【问题描述】：

我想在我的页面上为div 设置响应式填充。它应该是 height 自身的五分之一，在变量 cover_height 中。

到目前为止，这是我的方法，这是对question的回答，但它不会改变padding-top:

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

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

欢迎任何关于代码的反馈，因为我是 JS 的新手。

【问题讨论】：

这是在我为这个问题更改它之前..但我忘了在它前面添加document...将编辑。很抱歉造成混乱。
试试cover.style.paddingTop = cover_height / 5 + "px";
(cover_height / 5) + "px";
顺便说一下，据我所知，JS 没有.height。它应该是clientHeight（或style.height，如果通过内联样式设置高度）。除此之外，我没有看到其他错误。
clientHeight 成功了！

标签： javascript css height

【解决方案1】：

据我所知，JavaScript (vanilla) 没有 element.height 函数。它应该是.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;
}

&lt;div id='cover'&gt;&lt;/div&gt;

这种响应式设计方法有意义吗？

如果您可以为height 使用基于固定视口单位的值，那么我会推荐类似下面的 sn-p 的内容。这里元素的高度根据视口的高度增加（或减少），padding-top 始终是高度的 1/5。例如，如果视口高度为 100 像素，则元素的高度为 30 像素，顶部内边距为 6 像素。

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

&lt;div id='cover'&gt;&lt;/div&gt;

如果您不能使用视口单位（或）元素的高度是自动的并且会根据内容增加或减少，那么您的方法非常适合设置padding-top。

如果您想根据元素父元素的宽度设置padding-top，那么我建议您使用纯 CSS 使用百分比值来设置。 This is because a percentage value for padding or margin is always computed with respect to the element's width。 here 提供了此行为的示例。

【讨论】：

谢谢你，哈利。这就是我想要的！
如果我可能会问：这种生成响应式设计的方法有意义吗？
@Flip：如果您希望根据元素的宽度设置内边距，我会推荐纯 CSS，因为这是默认情况下内边距百分比值的工作方式。但是对于身高，我认为您的方法相当不错。让我再想一想。

【解决方案2】：

Working fiddle

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

clientHeight：包括高度和垂直填充。
offsetHeight：包括高度、垂直内边距和垂直边框。

例子：

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 = cover_height / 5 + "px";

#cover{
  width: 200px;
  height: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cover'> Cover </div>

【讨论】：