- インラインスタイルの変更:
要素のスタイルを直接変更するには、
styleプロパティを使用します。例えば、以下のコードでは、要素の背景色を赤に変更しています。
let element = document.getElementById('myElement');
element.style.backgroundColor = 'red';- クラスの追加と削除:
複数の要素に同じスタイルを適用する場合は、クラスを使用すると便利です。まず、CSSでスタイルを定義し、それをクラスとして追加または削除します。以下の例では、要素に
highlightクラスを追加しています。
let element = document.getElementById('myElement');
element.classList.add('highlight');クラスを削除するには、classList.remove メソッドを使用します。
- スタイルの取得:
要素のスタイルを取得するには、
getComputedStyleメソッドを使用します。以下の例では、要素の高さを取得しています。
let element = document.getElementById('myElement');
let computedStyle = window.getComputedStyle(element);
let height = computedStyle.getPropertyValue('height');
console.log(height);- CSSテキストの変更: 要素のスタイルを直接変更せずに、CSSテキストを変更することもできます。以下の例では、要素のクラスを変更して新しいスタイルを適用しています。
let element = document.getElementById('myElement');
element.className = 'newClass';これらはJavaScriptを使用してウェブページのスタイルを操作するいくつかの基本的な方法です。さらに高度なテクニックや他のDOM操作と組み合わせることで、より動的なスタイルの変更が可能です。