https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/use-of-getcomputedstyle-property-that-is-convenient-to-get-the-currently-applied-style-in-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/use-of-getcomputedstyle-property-that-is-convenient-to-get-the-currently-applied-style-in-javascript/

JavaScriptで現在適用されているStyleを取得するのに便利なgetComputedStyleプロパティの使い方

JavaScriptで現在適用されているStyleを取得する

JavaScriptでスタイルを取得するには、getComputedStyleプロパティを用います。

取得される値は、最終的に適用されている値になります。また、CSSファイル内で記述した形式で取得できるわけではありません。

例えば16進数でカラーコードを記入していても、実際に取得できる値はrgbだったりします。

プロパティ

プロパティ意味
getComputedStyle(要素).プロパティ名スタイルの値を取得文字列

サンプルコード

ページを開いてから3秒後にテキストの色を変え,かつ太さを変更するサンプルコードを紹介します。

そして、その時に新たに適用されたスタイルの情報を getComputedStyle プロパティを利用したテキスト出力しています。

Output
私は書き換え前のテキスト。3秒後に色を変え、太さも変わります。
Pug
#targetText 私は書き換え前のテキスト。3秒後に色を変え、太さも変わります。
JavaScript
const targetText = document.getElementById('targetText');
setTimeout(() => {
	//色を変え、太さを変えます。
	targetText.style.fontWeight = 'bold';
	targetText.style.color = 'red';
	targetText.textContent = `変わりました。太さは${getComputedStyle(targetText).color}で、カラーは${getComputedStyle(targetText).fontWeight}です。`;
}, 3000);
インストラクター
コメント

コメントを残す