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.
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.
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>
document.in front of it..will edit. sorry for the confusion..heightas far as I know. It should beclientHeight(orstyle.heightif height is set via inline styles). Other than that I see no other errors.clientHeightdid the trick!