Element.style - style属性のオブジェクトを取得する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、Elementオブジェクトのstyleはstyle属性を含んだプロパティです。

説明

Elementオブジェクトのstyleプロパティは、その要素のstyle属性を含むオブジェクト(CSSStyleDeclaration)です。

<a style="color:white; background:red">SYNCER</a>

// aElement = <a style="color:white; background:red">SYNCER</a>

// aElement.styleの取得
var style = aElement.style ;

取得できるのはCSSStyleDeclarationという種類のオブジェクトで、その要素にインライン方式(style="...")で指定されているスタイルの情報が含まれています。下記は、aElement.styleで参照したCSSStyleDeclarationの一部です。スタイルシートのプロパティ名をキー名にした、全てのスタイルの情報が含まれています。指定したもの、しないもの全てです。

{
	background: "red",
	backgroundAttachment: "initial",
	backgroundBlendMode: "",
	backgroundClip: "",
	color: "white"
}

background-attachmentのように途中にハイフンが入ったプロパティ名の場合、CSSStyleDeclarationではbackgroundAttachmentというキー名になります。ハイフン(-)は無視して、ハイフン直後の文字が大文字になるルールです。

例えば、CSSでbackground-blend-modeなら、JavaScriptではbackgroundBlendMode、CSSでbackground-clipなら、JavaScriptではbackgroundClipです。例外として、CSSのfloatプロパティは、JavaScriptではCSSFloatというキー名になります。floatという文字はJavaScriptの予約語だからです。

あと、くどいですがもう1つだけ。-webkit-tab-size、-moz-tab-sizeなどのベンダープレフィクスが付く場合です。ルール通りなんですが、先頭のハイフン(-)を無視します。そして先頭になる文字は、小文字でも大文字でも認識されます。WebkitTabSizeでも、webkitTabSizeでも、どちらでもいいということです。

// style属性を変更
aElement.style.background = "blue" ;

<a style="color:white; background:blue">SYNCER</a>

CSSStyleDeclarationの各プロパティの内容は変更できます。例えば上記は、背景色を変更する例です。内容を変更すると、ブラウザの表示に反映されます。

// style属性を変更 ( background:blueを削除 )
aElement.style.background = "" ;

<a style="color:white">SYNCER</a>

空文字を指定すると、要素のstyle属性から該当のCSSプロパティが削除されます。

サンプルコード

<a id="target" style="color:white; background:red">SYNCER</a>

// a要素を取得
var aElement = document.getElementById( "target" ) ;

// style属性を取得
var style = aElement.style ;

// a要素を取得
var aElement = document.getElementById( "target" ) ;

// CSSのcolorプロパティを変更
aElement.style.color = "#000000" ;

// CSSのtext-decorationプロパティを変更
aElement.style.textDecoration = "underline" ;

// CSSの-webkit-tab-sizeプロパティを変更
aElement.style.webkitTabSize = "5" ;

デモ

a要素のstyle属性を取得して表示します。また、background-colorの値をpinkに変更します。コンソールでオブジェクトの中身を確認できます。

RUN
HTML
CSS
JavaScript

<p><a href="./dummy.php" id="target" style="color:black">SYNCER</a></p> <p><code id="style"><a href="./dummy.php" id="target" style="color:black">SYNCER</a></code></p> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="get" class="button">取得</button></p> <p><button id="set" class="button">変更</button></p> <p><button id="reset" class="button">リセット</button></p>

.output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// 取得 document.getElementById( "get" ).addEventListener( "click", function() { try { // a要素を取得 var aElement = document.getElementById( "target" ) ; // style属性を取得 var style = aElement.style ; // 取得した結果を出力 document.getElementById( "output" ).textContent = style ; // コンソールで内容を出力 console.log( style ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // 変更 document.getElementById( "set" ).addEventListener( "click", function() { try { // 要素を取得 var aElement = document.getElementById( "target" ) ; // CSSのbackground-colorプロパティを変更 aElement.style.backgroundColor = "pink" ; // 結果を表示 document.getElementById( "style" ).textContent = aElement.outerHTML ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "" ; document.getElementById( "target" ).style.backgroundColor = "" ; document.getElementById( "style" ).textContent = document.getElementById( "target" ).outerHTML ; }

構文

readonly CSSStyleDeclaration style = Element.style

返り値

項目	説明
style	style属性を含んだオブジェクト(CSSStyleDeclaration)。

外部リンク

HTML Living Standard - WHATWGによる仕様書。

説明

サンプルコード

デモ

構文

返り値

関連項目

外部リンク