05/09/01 05:22:04
質問です。JavaScriptからstyle.displayを操作してspanエレメントを表示させたり隠したりするスクリプトを書いています。
はじめはstyle.display="none"にしておき、ボタンを押すことで表示する/隠すを切り替えます。
しかし、<span style="display:none">foo</span>だと切り替えられるのに、<span class="hide">foo</span>にしてCSSでdisplay:noneを指定すると、うまく切り替わりません。
もっというと、CSSでdisplay:noneを指定したエレメントは、style.displayをどんなにいじっても、表示されません。
質問がわかりにくくてすみませんが、アドバイスをお願いします。なおFirefox1.06で試しました。
以下が検証用のHTMLファイルです。
<html>
<head>
<script type="text/javascript"><!--
var flag = false;
function toggle_display() {
flag = !flag;
var elems = document.getElementsByTagName('span');
for (var i = 0; i < elems.length; i++) {
elems[i].style.display = flag ? "" : "none";
}
}
--></script>
<style type="text/css"><!--
.hide { display: none; }
--></style>
</head>
<body>
<button type="button" onclick="toggle_display()">toggle</button>
<br>
<span>foo</span><br>
<span style="display:none">bar</span><br>
<span class="hide">baz</span><br>
</body>
</html>