[JavaScript General] スタイルシートを操作する

用語の整理。

[markdown]

See the Pen JavaScript: inline style & class by DriftwoodJP (@DriftwoodJP) on CodePen.

## インラインスタイルの適用

> [element.style – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/style)
>
> 要素の style 属性に相当するオブジェクトを返します。

`要素ノード.style.スタイルプロパティ名 = 設定値`

> [mouseover – Event reference | MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseover)

“`javascript
const element1 = document.getElementById(‘changeStyle’);
element1.addEventListener(‘mouseover’, function(){changeStyle(event, ‘blue’)}, false);
function changeStyle(event, color) {
let element = event.target;
element.style.backgroundColor = color;
setTimeout(() => {
element.style.backgroundColor = ”;
}, 500);
}
“`

## 外部スタイルシートの適用

> [element.className – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/className)
>
> className は要素の class 属性の値の取得 / 設定に用います。

`要素ノード.className = 設定値`

“`javascript
const element2 = document.getElementById(‘changeClass’);
element2.addEventListener(‘mouseover’, function(){changeClass(event, ‘js-highlight’)}, false);
function changeClass(event, clazz) {
let element = event.target;
element.className = clazz;
setTimeout(() => {
element.className = ‘js-normal’;
}, 500);
}
“`
[/markdown]