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;";
$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>
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>
<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>