Question

我希望在我的网页上为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很新。

Answer 1

据我所知，JavaScript（vanilla）没有userid | lastrequestsent | requestcount|函数。它应该是.clientHeight或.offsetHeight，具体取决于您要查找的内容。 element.height返回高度，包括边框，填充和滚动条。

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始终是高度的1/5。例如，如果视口高度为100px，则元素的高度为30px，填充顶部为6px。

padding-top

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

如果你不能使用视口单元（或）元素的高度是自动的，并且会根据内容增加或减少，那么你的方法相当适合设置<div id='cover'></div>。

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

Answer 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>

如何使用JavaScript

2 个答案: