使用 javascript 根据元素高度和父高度更改元素填充

Question

I need to change the size of h1's top padding based on the height of h1 and it's parent. Padding top would be (h1's height - h1's parent height) / 2

I still don't understand why the JavaScript code isn't working.

 window.onload = function() { const h1 = document.getElementsByTagName("h1")[0]; h1.innerHTML = document.title; h1.style.paddingTop = (((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString()); console.log(((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString()); }

 header { border-bottom: solid 1px black; position: fixed; height: 10vh; width: 100%; } h1 { margin: 0px; margin-top: auto; }

 <header> <h1>Text</h1> </header>

Answer 1

Simply because you have not used a unit to identify the value of evaluated padding. Additionally add display: block to the h1 style. Checkout this JSBin demo.

 window.onload = function() { const h1 = document.getElementsByTagName("h1")[0]; h1.innerHTML = document.title; h1.style.paddingTop = (((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString())+'vh'; // Use unit. console.log(((h1.parentElement.clientHeight - h1.clientHeight) / 2).toString()); }

 header { border-bottom: solid 1px black; position: fixed; height: 10vh; width: 100%; } h1 { margin: 0px; margin-top: auto; display: block; }

 <header> <h1>Text</h1> </header>