【JavaScript / DOM】要素ノードのスタイル - ブラウザ上の見た目をプログラムから変更する
JavaScript/DOMのスタイル操作を解説します。
styleプロパティ
styleプロパティは要素のスタイルを表すプロパティです。
要素ノードはstyleプロパティを所有し、このプロパティを通して各スタイルプロパティにアクセスできます。
スタイル取得（style.プロパティ名）
スタイルを取得するには、styleプロパティを使います。
<h1 id="title" style="color: red; font-size: 2.5rem;">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<script type="text/javascript">
let element = document.getElementById("title");
console.log(element.style.color);
console.log(element.style['font-size']);
</script>red
2.5remスタイル設定（style.プロパティ名 = 値）
スタイルを設定するには、styleプロパティを使います。
<h1 id="title" style="color: red; font-size: 2.5rem;">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<script type="text/javascript">
let element = document.getElementById("title");
element.style.color = 'blue';
console.log(element.style.color);
</script>blueスタイルの初期化は値をnullにします。
<h1 id="title" style="color: red; font-size: 2.5rem;">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<script type="text/javascript">
let element = document.getElementById("title");
element.style.color = null;
console.log(element.style.color);
</script>
注意点
styleプロパティはインラインスタイルを取得します。
style要素や外部スタイルシートで設定したプロパティは取得できません。
<style>
h1 {
color: red;
}
</style>
<h1 id="title" style="font-size: 2.5rem;">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<script type="text/javascript">
let element = document.getElementById("title");
console.log(element.style.color);
</script>
要素に適用したスタイルを全て取得するには、windowオブジェクトのgetComputedStyleメソッドを使います。
<style>
h1 {
color: red;
}
</style>
<h1 id="title" style="font-size: 2.5rem;">JavaScriptとは</h1>
<p>JavaScriptはプログラミング言語の１つです。</p>
<script type="text/javascript">
let element = document.getElementById("title");
let style = window.getComputedStyle(element);
console.log(style.color);
</script>rgb(255, 0, 0)スタイルプロパティcolorの値を関数表記で取得できました。
なお、windowオブジェクトはウィンドウ（タブ別）を表わすオブジェクトです。
ブラウザ実行のJavaScriptで自動で生成され、画面上に表示する全てのオブジェクトの最上位のオブジェクトです。
