https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-style-property-which-is-convenient-to-directly-operate-css-with-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-style-property-which-is-convenient-to-directly-operate-css-with-javascript/

JavaScriptで直接CSSの操作を行うのに便利なstyleプロパティの使い方

JavaScriptで直接CSSの操作を行うstyleプロパティ

JavaScriptでは直接CSSを書いたり、削除する方法が用意されています。基本的にはCSSできちんと定義しておくべきですが、ユーザーの動作によって追加のCSS適用したり、一部のCSSを除外したりするときにはJavaScriptで操作するのが有効です。

プロパティ

プロパティ意味
要素.style.プロパティスタイル文字列

メソッド

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

そのさらに3秒後にもとに戻します。

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

コメントを残す