CSSStyleDeclaration.getPropertyValue() - プロパティの値を取得する
getPropertyValue()は、CSSStyleDeclarationのメソッドです。プロパティの値を返します。
概要
- 名前
- getPropertyValue
- 所属
- CSSStyleDeclaration
- IDL
CSSOMString getPropertyValue(CSSOMString property); typedef USVString CSSOMString;
- 仕様書
- https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue
説明
第1引数(property)には、取得したい値のプロパティ名を文字列で指定します。
デモ
CSSStyleDeclaration.getPropertyValue()のデモです。テキスト色のプロパティ値を取得する例です。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<head>
<style>
p#hoge { color: purple ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p id="hoge">SYNCER</p>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
// var cssStyleDeclaration = element.style ; // style属性の場合
var cssStyleDeclaration = getComputedStyle( element ) ; // 計算値の場合
var value = cssStyleDeclaration.getPropertyValue( "color" ) ;
console.log( value ) ;
appendText( value + "\n\n" ) ;
function appendText( text ) {
document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | 確認中 | ● | ● | ● |
関連記事
- CSSStyleDeclaration.getPropertyPriority()
- getPropertyPriority()は、CSSStyleDeclarationのメソッドです。対象のスタイルシートに!importantのキーワードがある場合、"important"を返します。
- CSSStyleDeclaration.removeProperty()
- removeProperty()は、CSSStyleDeclarationのメソッドです。プロパティの優先値(!important)を外します。
- CSSStyleDeclaration.setPropertyValue()
- setPropertyValue()は、CSSStyleDeclarationのメソッドです。プロパティの値を更新します。2017年10月現在、対応しているブラウザはありません。
- CSSStyleDeclaration
- CSSStyleDeclarationは、あるスタイルシートのまとまりを管理するための機能を備えたインターフェイスです。