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

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

setPropertyValue()は、CSSStyleDeclarationのメソッドです。プロパティの値を更新します。2017年10月現在、対応しているブラウザはありません。

概要

名前
setPropertyValue
所属
CSSStyleDeclaration
IDL
[CEReactions] void setPropertyValue(CSSOMString property, [TreatNullAs=EmptyString] CSSOMString value);

typedef USVString CSSOMString;
仕様書
https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setpropertyvalue

説明

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

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

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

デモ

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

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

<!DOCTYPE html>
<head>
<style>
p#hoge { color: purple ; }
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.setPropertyValue( "color", "blue" ) ;
</script>
</body>
</html>

サポート状況

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