ElementCSSInlineStyle.style - スタイルシートのまとまり

2017/10/14

styleは、ElementCSSInlineStyleのプロパティです。style属性に指定されているスタイルシートのまとまりをCSSStyleDeclarationで返します。

概要

名前

style

所属

IDL

[SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;

仕様書

https://drafts.csswg.org/cssom/#dom-elementcssinlinestyle-style

説明

style属性の値をCSSStyleDeclarationで返す。

チュートリアル

style属性に指定されているスタイルシートのまとまりをCSSStyleDeclarationで取得します。

<p style="color:red;font-weight:700;" id="hoge">SYNCER</p>

var element = document.getElementById( "hoge" ) ;
element.style ;	// CSSStyleDeclaration

このプロパティに値を代入した場合、CSSStyleDeclaration.cssTextに代入したのと同じ扱いになります。下記は同じ結果になります。

element.style = "color:blue; font-weight: 400;" ;
element.style.cssText = "color:blue; font-weight: 400;" ;

デモ

ElementCSSInlineStyle.styleのデモです。コメントアウトを外して、代入する場合も試してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<head>
</head>
<body>
<p id="hoge" style="
	color:red ;
	background-color: #fffff0 ;
	font-weight: 700 ;
">SYNCER</p>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;

// 代入
// element.style = "color:green; font-size: 24px;" ;

// 取得
var value = element.style ;

console.log( value ) ;
document.getElementById( "result" ).textContent = value ;
</script>
</body>
</html>