style.cssTextプロパティ

style.cssTextは、要素のスタイル属性の値を取得、もしくは、設定するプロパティ。

要素のCSSルール(スタイル)を動的に一括指定することができる。

構文

取得

var $cssText = $elementReference.style.cssText;

戻り値

要素のスタイル属性の値。

設定

$elementReference.style.cssText = "CSSルール";
CSSルール
CSSルール(スタイル)を文字列で指定。

設定例

// フォントサイズを「30px」に。
$elementReference.style.cssText = "font-size: 30px;";

// 背景色を「黄色」、フォントサイズを「20px」に。
$elementReference.style.cssText = "background-color: yellow; font-size: 20px;";

サンプル

サンプルボックス要素



変更後のスタイル属性値:

サンプルの動作について

  • 「設定(マージン「30px」、フォントサイズ「30px」、色「赤色」)」ボタンをクリックすると、「サンプルボックス要素」のマージンを「30px」、文字のサイズを「30px」、文字色を「赤色」にし、「変更後のスタイル属性値:」の右横に「margin: 30px; text-align: center; font-size: 30px; color: red;」と表示する。
  • 「設定(マージン「20px」、パディング「10px」、枠線「1px 実線、青色」)」ボタンをクリックすると、「サンプルボックス要素」のマージンを「20px」、パディングを「10px」、枠線を「1px」の幅の青色の実線にし、「変更後のスタイル属性値:」の右横に「margin: 20px; padding: 10px; border: 1px solid blue;」と表示する。
  • 「設定(パディング「10px」、背景色「ピンク色」)」ボタンをクリックすると、「サンプルボックス要素」のパディングを「10px」、背景色を「ピンク色」にし、「変更後のスタイル属性値:」の右横に「padding: 10px; background-color: pink;」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setMargin( $cssText ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.style.cssText = $cssText;
    var $cssText = $elementReference.style.cssText;
    document.getElementById( "sampleOutput" ).innerHTML = $cssText;
}
</script>

HTML

<div style="border: 1px solid red; background-color: yellow; margin: 18px; width: 400px; height: 200px;">
    <div id="sample" style="background-color: pink; font-weight: bold;">
    サンプルボックス要素
    </div>
</div>
<button onclick="setMargin('margin: 30px; text-align: center; font-size: 30px; color: red;');">設定(マージン「30px」、フォントサイズ「30px」、色「赤色」)</button>
<br />
<button onclick="setMargin('margin: 20px; padding: 10px; border:1px solid blue;');">設定(マージン「20px」、パディング「10px」、枠線「1px 実線、青色」)</button>
<br />
<button onclick="setMargin('padding: 10px; background-color: pink;');">設定(パディング「10px」、背景色「ピンク色」)</button>
<br />
<p>変更後のスタイル属性値:<span id="sampleOutput"></span></p>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, その他, プロパティ, リファレンス パーマリンク