How to set a dynamic CSS value with JavaScript

Question

I want to have responsive padding for a div on my page. It should be a fifth of the height of itself, which is in the variable cover_height.

This is my approach so far, which is following an answer to this question, but it doesn't change padding-top:

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

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

Any feedback regarding the code is welcome as I am pretty new to JS.

Answer 1

JavaScript (vanilla) has no element.height function as far as I know. It should be .clientHeight or .offsetHeight depending on what you are looking for. offsetHeight returns the height including the border, padding and scroll bars.

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>

---

Does this approach to responsive design make sense?

If you could use fixed viewport unit based value for height then I would recommend something like in the below snippet. Here the height of the element increases (or decreases) based on the height of the viewport and the padding-top is always 1/5th of the height. For example, if viewport height is 100px, the element's height would be 30px and the padding top would be 6px.

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

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

If you cannot use viewport units (or) the element's height is auto and will increase or decrease based on content then your approach is reasonably good for setting padding-top.

If you had wanted to set padding-top based on the width of the element's parent then I would have recommended doing it with pure CSS using percentage values. This is because a percentage value for padding or margin is always computed with respect to the element's width. An exampe of this behavior is available here.