如何使用JavaScript设置动态CSS值

Question

我希望在我的页面上为一个 div 实现响应式的内边距。 它应该是自身高度（变量 cover_height）的五分之一。

这是我目前的方法，参考了这个 问题 的答案， 但它没有改变 padding-top：

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

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

欢迎提供任何关于代码的反馈，因为我对JS还很新手。

- Flip

---

这是在我修改问题之前的代码，但是我忘记在它前面加上 document.，我会进行编辑。抱歉造成困惑。 - Flip

尝试将cover.style.paddingTop设置为cover_height / 5 + "px"; - silviagreen

(cover_height / 5) + "px"; - Rajshekar Reddy

顺便说一下，据我所知JS没有.height。应该是clientHeight（如果高度是通过内联样式设置的，则为style.height）。除此之外，我没有看到其他错误。 - Harry

clientHeight 做到了！ - Flip

Answer 1

JavaScript（原生）据我所知没有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;
}

<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 的百分比值始终是相对于元素的宽度计算的。这种行为的示例可以在 此处 查看。点击此处了解更多信息。

- Harry

---

谢谢你，Harry。这正是我想要的！ - Flip

我可以问一下吗：这种生成响应式设计的方法有意义吗？ - Flip

@Flip：如果您想根据元素的宽度设置填充，我会建议使用纯CSS，因为这是百分比填充值默认的工作方式。但对于高度，我认为您的方法还算不错。让我再想一想。 - Harry

Answer 2

演示代码

您应该使用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>

- Zakaria Acharki