JavaScriptで特定の要素やhtml,body要素の背景色を変更するなどの「style属性を追加する」方法

JavaScriptでボタンを押したときや、特定の位置までスクロールさせたときに「背景の色を変えたい」「テキストの大きさを変えたい」ということがありました。

その場合は「style属性を追加」するとできることを勉強しましたので、今後のために方法をメモ書きました。

似たようなことをされたいという方は、機会がありましたらご参考ください。

特定の要素にstyle属性を追加するには

例えば「getElementById」を使ってidを付与した要素を取得して、その要素にstyle属性を追加するには以下のようにするとOKです。

<p id='box'>text</p>

let box = document.getElementById('box');
box.style.background = '#0ff';

body要素、つまり「<body>」タグにstyle属性を追加するには、以下の方法でOKです。

document.body.style.overflow = 'hidden';

html要素、つまり「<html>」タグにstyle属性を追加するには、以下の方法でOKです。

document.documentElement.style.overflow = 'hidden';

追加した属性は、以下のページに書いてある方法で削除もできますので、あわせてご参考ください。

例えばですが、無料のテキストエディターBracketsを使うと、途中まで入力をすると指定できるプロパティ（backgroundとかcolorとか）を補助してくれるので、いちいち覚えなくても大丈夫です。

便利ですよね。