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など)が定義されている場合でも、問題なく実現できる方法が望ましいです。

回答の条件
  • 1人2回まで
  • 登録:2007/06/03 20:33:18
  • 終了:2007/06/05 15:08:19

ベストアンサー

id:GEN111 No.1

GEN111回答回数472ベストアンサー獲得回数582007/06/04 10:10:20

ポイント60pt
<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 を特定する条件が不明なのでリストにしました。

id:penchick

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

2007/06/05 15:06:47

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません