JavaScriptでボタンを押したときや、特定の位置までスクロールさせたときに「背景の色を変えたい」「テキストの大きさを変えたい」ということがありました。
その場合は「style属性を追加」するとできることを勉強しましたので、今後のために方法をメモ書きました。
似たようなことをされたいという方は、機会がありましたらご参考ください。
特定の要素にstyle属性を追加するには
例えば「getElementById」を使ってidを付与した要素を取得して、その要素にstyle属性を追加するには以下のようにするとOKです。
html
<p id='box'>text</p>
JavaScript
let box = document.getElementById('box');
box.style.background = '#0ff';サンプル
body要素にstyle属性を追加するには
body要素、つまり「<body>」タグにstyle属性を追加するには、以下の方法でOKです。
document.body.style.overflow = 'hidden';
html要素にstyle属性を追加するには
html要素、つまり「<html>」タグにstyle属性を追加するには、以下の方法でOKです。
document.documentElement.style.overflow = 'hidden';
追加した属性を削除もできるよ
追加した属性は、以下のページに書いてある方法で削除もできますので、あわせてご参考ください。
おまけ：プロパティを入力補助してくれるテキストエディターもあるよ
例えばですが、無料のテキストエディターBracketsを使うと、途中まで入力をすると指定できるプロパティ（backgroundとかcolorとか）を補助してくれるので、いちいち覚えなくても大丈夫です。
プロパティを覚えなくても入力補助してくれる
便利ですよね。
このページを共有する