人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavascriptでCSSを、

a.style.width = x+"px";
b.style.height = y+"px";
.
.

のような感じで動的に定義した時に、適用済みのstyle一覧を、

#a {
width: 250px;
.
.
}

#b {
height: 150px;
.
.
}

のような標準的なCSSのフォーマットでtextarea内に表示できないかと考えています。どなたか実現方法をご存知の方はいらっしゃいませんか。

特に、a, bなどのidが10個以上になり、それぞれ複数のスタイル(font-size, width, heightなど)が定義されている場合でも、問題なく実現できる方法が望ましいです。

●質問者: penchick
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS JavaScript PX スタイル フォーマット
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● GEN111
●60ポイント ベストアンサー
<html>
 <head>
 <script type="text/javascript">
 idlist = ['alpha', 'bravo', 'charlie'] ;

 function setCssText() {
 var str = '' ;
 for (i = 0; i < idlist.length; ++i) {
 str += '#'+idlist[i]+' {\n' ;
 thisCssText = document.getElementById(idlist[i]).style.cssText ;
 if (thisCssText != '') {
 thisCssText = thisCssText.replace(/; ?/g, ';\n') ;
 thisCssText = thisCssText.replace(/(;\n)?$/, ';\n') ;
 thisCssText = thisCssText.replace(/-moz-.+(\n|$)/g, '') ; // mozilla 用のプロパティ除去
 str += thisCssText ;
 }
 str += '}\n' ;
 }

 document.getElementById('cssText').value = str ;
 }

 window.onload = function() {
 document.getElementById('alpha').style.width = '123px' ;
 document.getElementById('alpha').style.marginLeft = '5em' ;
 document.getElementById('alpha').style.background = 'yellow' ;

 document.getElementById('bravo').style.fontWeight = 'bold' ;
 document.getElementById('bravo').style.border = 'solid 1px' ;
 document.getElementById('bravo').style.display = 'none' ;

 setCssText() ;
 }
 </script>
 </head>

 <body>
 <div id="alpha"></div>
 <div id="bravo"></div>
 <div id="charlie"></div>

 <form>
 <textarea id="cssText" cols="60" rows="20"></textarea>
 </form>
 </body>
</html>

こういうのではどうでしょうか。

適用 ID を特定する条件が不明なのでリストにしました。

◎質問者からの返答

できました!ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ