SYNCERのロゴ
アイキャッチ画像

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

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

概要

名前
setProperty
所属
CSSStyleDeclaration
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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月14日 (土)
コンテンツを公開しました。