要素のスタイルの書き換え、変更 cssTextプロパティ
element.style.cssText
element.style.cssTextは、elementのプロパティ：値；のスタイル情報を一括して取得、設定することができます。これを利用して
JavaScriptでスタイルの変更を一括して行います。
cssTextプロパティ
変更後のプロパティ：値；
***
コロリポプラン 詳細はこちら
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
イオンのオンラインショッピングサイト ～ おうちでイオン イオンショップ ～
サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>cssTextプロパティ</title>
<!--動作に不要なコードは省略していることがあります-->
<style type="text/css">
#wrapper{
border: 1px solid gray; /* ボーダー : 幅,線種,色 */
background:linear-gradient(white,#f0ffff); /* 色の線形グラデーション */
margin: 10px;padding: 1px; /* 内側余白 */
width: 500px; height: 180px; /* 表示ボックスの幅,高さ */
position: relative; /* 相対配置 */
}
</style>
<script>
var newVal = [ // 設定するプロパティ値(cssスタイル) 文字列で指定
["margin-top: 55px; text-align: center; font-size: 2.5em; color:#ff00ff;"],
["background-color:yellow; margin:20px; padding:10px; border:1px solid blue;"],
["background-color:violet; color:navy; padding:30px; font-size: 3.5em;"],
["position:absolute; bottom:10px; right:10px; border:3px dotted red;"],
["background-color:black; color:white; margin-top:100px; text-align:right;"],
];
function cngCss(num){
var cssStr = newVal[num]; // 配列から値 取得
var elem = document.getElementById("tgtBox");
elem.style.cssText = cssStr; // プロパティ値 設定
var cssStr = elem.style.cssText;//プロパティ値 取得
document.getElementById("sDisp").innerHTML = cssStr; //プロパティ値 書き出し
}
</script>
</head>
<body>
<div id="wrapper">
<div id="tgtBox" style="background-color:#33cccc;padding:3px;
font-weight: bold; font-size:16px;">cssTextプロパティ
</div>
</div>
<form>
<fieldset style="border :none;">
<legend>選択してください</legend>
<label><input type="radio" name="rdo" onclick="cngCss(0);" />
マージン-上：55px； 文字色：#ff00ff；文字サイズ：2.5em；...</label><br />
<label><input type="radio" name="rdo" onclick="cngCss(1);" />
背景色：yellow；マージン：20px；枠線：1px solid blue；...</label><br />
<label><input type="radio" name="rdo" onclick="cngCss(2);" />
背景色：violet；文字色：navy；文字サイズ：3.5em；...</label><br />
<label><input type="radio" name="rdo" onclick="cngCss(3);" />
配置：absolute；下から：10px；右から：10px； 枠線：3px dotted red；</label><br />
<label><input type="radio" name="rdo" onclick="cngCss(4);" />
背景色：black；文字色：white；文字寄せ：right；マージン-上：100px；...</label>
</fieldset>
</form>
<p>変更後のプロパティ：値；<br />
<span id="sDisp">ここに書き出し</span></p>
</body>
</html>cssTextプロパティ
スタイルルールの取得及び設定
- 取得
-
ここの プロパティ：値； 取得
<!-- html -->
<div id="tgtBox"
>
ここのプロパティ値 取得</div>
<!-- script -->
var elem = document.getElementById("tgtBox");
var cssStr = elem.style.cssText;// プロパティ:値; 取得
- 設定
-
ここの プロパティ：値； 変更// style で個別に指定
var div = document.getElementById("tgtBox");
div.style.color ="white";
div.style.backgroundColor ="#660";
div.style.width ="200px";
div.style.padding ="10px";
// style.cssText で纏めて指定
div.style.cssText="color:white;background-color:#660;width:200px;padding:5px";
複数のスタイルを変更する場合はこの方法がより有効です。
⇐トグルスイッチ
- コロリポプラン 詳細はこちら
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- スタイルシート クラス名の取得、付け替え
- 要素のID名を動的に換えてスタイルを変更
- スタイルシートだけでポップアップメニュー、補足説明文を表示します。
- CSS positionプロパティ
- marginプロパティ
- スタイルシート css を使った横並びリストメニュー
- border-styleプロパティ
- paddingプロパティ ボックスの内側の余白
- text-align プロパティ
- visibilityプロパティ 領域の表示、非表示
- display プロパティ
- overflow プロパティ
タグ：cssText
