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

CSSStyleDeclaration.cssFloat - float値

cssFloatは、CSSStyleDeclarationのプロパティです。適用されているfloat値を返します。

概要

名前
cssFloat
所属
CSSStyleDeclaration
IDL
[CEReactions] attribute [TreatNullAs=EmptyString] CSSOMString cssFloat;

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

説明

floatの値を文字列で返す。

値を代入して変更することもできる。ただし、計算値のCSSStyleDeclarationの場合は変更できない。

チュートリアル

style属性のスタイルシートのテキストを取得する例です。

<p style="float:right;" id="hoge">SYNCER</p>
var element = document.getElementById( "hoge" ) ;
var cssStyleDeclaration = element.style ;
var value = cssStyleDeclaration.cssFloat ;	// "right"

値を代入すれば、スタイルシートをまとめて変更できます。ただし、Window.getComputedStyle()で取得した計算値のスタイルシートは変更することができないのでご注意下さい。

cssStyleDeclaration.cssFloat = "left" ;

デモ

CSSStyleDeclaration.cssFloatのデモです。適用されているfloatの値が返るのを確認して下さい。

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

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

// 代入
// cssStyleDeclaration.cssFloat = "left" ;

// 取得
var value = cssStyleDeclaration.cssFloat ;

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

サポート状況

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