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など）が定義されている場合でも、問題なく実現できる方法が望ましいです。
No.1
472
58
60pt
3
3
<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 を特定する条件が不明なのでリストにしました。
3
1
できました！ありがとうございました。