javascriptでheaderの高さを取得し、bodyのpadding-topの高さを変更したい。

Question

前提・実現したいこと

javascriptで現在のヘッダーの高さに合わせてbodyのpaddingを変えるものを作っています。
ページの横幅が変わることで高さを増したヘッダーによってbodyの中身が隠れてしまうことを避けるために使いたいと考えています。

下記のjsのidに対応するidは、html側にあるものと考えて頂いて大丈夫です。

発生している問題・エラーメッセージ

Uncaught TypeError: obj.getElementById is not a function

該当のソースコード

window.addEventListener('load', function(){
var obj = document.getElementById("header");
var h = obj.getBoundingClientRect().height;
obj.getElementById("body").style.paddingtop = h ;
})

試したこと

読み込むタイミングや、タイプミスがあるのかとコピペなど試してみましたがわかりませんでした。

getElementByIdは関数ではないというのも見つけたのですが、これと何か関係はありますでしょうか。

まだよくわからないことばかりですので、不備等あるかもしれませんが、是非ともご回答お願いします。

Answer 1

getElementById() メソッドを持つのは Document と DocumentFragment だけで、一般の要素にはありません。なので、

obj.getElementById("body").style.paddingtop = h ;

は

document.getElementById("body").style.paddingTop = `${h}px`;

となるべきでしょう。

または、

document.body.style.paddingTop = `${h}px`;

でいいかもしれません。

Comments

[child_raccoons]

解決いたしました！
ありがとうございます！

ご丁寧にありがとうございました。