CSSStyleDeclaration.setProperty() - プロパティを更新する

2017/10/14

setProperty()は、CSSStyleDeclarationのメソッドです。プロパティの値と、優先値(!important)を更新します。

概要

名前

setProperty

所属

IDL

[CEReactions] void setProperty(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value, [TreatNullAs=EmptyString] optional CSSOMString priority = "");

typedef USVString CSSOMString;

仕様書

https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty

説明

第1引数(property)には、対象のプロパティ名を指定します。

第2引数(value)には、設定したいプロパティ値を指定します。

第3引数(priority)に"important"を指定すると、!importantが付いて優先されます。

計算値のCSSStyleDeclarationの場合、このメソッドを実行しても反映されません。

デモ

CSSStyleDeclaration.setProperty()のデモです。テキスト色のプロパティを更新する例です。コメントアウトを変更して、計算値のCSSStyleDeclarationには適用できないことも確認して下さい。

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

<!DOCTYPE html>
<head>
<style>
p#hoge { color: purple !important ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p id="hoge">SYNCER</p>
<script>
var element = document.getElementById( "hoge" ) ;
var cssStyleDeclaration = element.style ;	// style属性の場合
// var cssStyleDeclaration = getComputedStyle( element ) ;	// 計算値の場合

cssStyleDeclaration.setProperty( "color", "blue", "important" ) ;
</script>
</body>
</html>