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.

it was before I changed it for this question..but I forgot to add `document.` in front of it..will edit. sorry for the confusion. — Flip, Feb 27 '16 at 12:42
By the way JS has no `.height` as far as I know. It should be `clientHeight` (or `style.height` if height is set via inline styles). Other than that I see no other errors. — Harry, Feb 27 '16 at 12:45

score 7 · Accepted Answer · edited May 23 '17 at 12:31

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.

If I may ask: Is this approach to generate a responsive design making sense? — Flip, Feb 27 '16 at 12:50
@Flip: If you were looking to set padding based on width of the element, I'd have recommended pure CSS because that's how percentage values for padding work by default. But for height, I think your approach is reasonably good. Let me think a bit more. — Harry, Feb 27 '16 at 12:53

Zakaria Acharki · Answer 2 · 2016-02-27T12:54:15.117

Working fiddle

You should use clientHeight or offsetHeight instead of height.

clientHeight : includes the height and vertical padding.
offsetHeight : includes the height, vertical padding, and vertical borders.

Example :

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

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

Hope this helps.

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>

How to set a dynamic CSS value with JavaScript

2 Answers2