DOM
CSSスタイルの使用

備考

インラインスタイルの読み込みと変更

インラインスタイル

HTML要素のインラインCSSスタイルを操作するには、 styleプロパティを読み込むか編集するだけです。

次の要素を仮定します。

<div id="element_id" style="color:blue;width:200px;">abc</div>

このJavaScriptを適用すると：

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // blue

//Set the color to red
element.style.color = 'red';

//To remove a property, set it to null
element.style.width = null;
element.style.height = null;

ただし、 width: 200px;外部CSSスタイルシートに設定した場合、 element.style.width = nullは効果がありません。この場合、スタイルをリセットするには、それをinitial ： element.style.width = 'initial'に設定する必要があります。

スタイルシートからスタイルを読み込んで変更する

element.styleは、要素属性としてインラインに設定されたCSSプロパティーのみを読み取ります。しかし、スタイルはしばしば外部スタイルシートに設定されます。要素の実際のスタイルには、 window.getComputedStyle(element)をwindow.getComputedStyle(element)アクセスできます。この関数は、すべてのスタイルの実際の計算値を含むオブジェクトを返します。

読み込みとインラインスタイルの変更例と似ていますが、スタイルはスタイルシートにあります：

<div id="element_id">abc</div>
<style type="text/css">
    #element_id {
        color:blue;
        width:200px;
    }
</style>

JavaScript：

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)

// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)