WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:Firefox での動的な style.display 変更

0:[投稿] B-Cus [2005/07/10 03:18 ][環境:Firefox 1.0.4 なんでも]

以下の HTML は、ボタンを押すと TR 要素の display に
block や none をセットして、TR 要素を表示・非表示を
切り替えるものです。

IE6 では正しく動作しますが、Firefox 1.0.4 では一度非表示に
してから表示すると、列の幅が乱れてしまいます。さらに表示・
非表示を繰り返すと、余分なスペースがどんどん増えていって
しまいます。

原因や回避策をお教えください。

なお、TR 要素を非表示にしたとき、テーブルの下にある文字を
上の方に詰めたいという条件があります。visibility='hidden'
だと Firefox でも表示は崩れないのですが、単に TR 要素が
見えなくなるだけで、その下にある文字が上に詰まってくれ
ないようです。


<html><body>
<script language="javascript">
<!--
 function display_change(display){
    var tbody = document.getElementById('tbody');
    var trs = tbody.getElementsByTagName('tr');
    for ( var i=0 ; i<trs.length ; i++ ){
       var tr = trs[i];
       tr.style.display = display;
    }
 }
// -->
</script>
<input type="button" value="各行表示" onclick="display_change('block');">
<input type="button" value="各行非表示" onclick="display_change('none');">
<table border>
<tbody id="tbody">
   <tr>
      <td>aaaaaaaaaa</td>
      <td>bb</td>
   </tr>
   <tr>
      <td>ccccccccccccccccc</td>
      <td>ddddddddddddddddddddd</td>
   </tr>
   <tr>
      <td>eeeeeeee</td>
      <td>fff</td>
   </tr>
</tbody>
</table>
</body>
</html>


1:[回答] B-Cus [2005/07/10 03:25 ]

追記。実際にやりたいのは、条件にマッチする行のみを表示・
非表示することですので、table・tbody 全体の非表示化は
できません。


2:[回答] AC1号 [2005/07/10 10:54 ]

CSSの仕様的には、tr要素のdisplayプロパティの初期値は、blockではなく、table-rowです。firefoxで表示確認してはいませんが。

このような表示/非表示の切り替えというパターンでは、私はclassNameの変更で対応しますが。


3:[完了] B-Cus [2005/07/10 11:48 ]

ありがとうございます。table-row とすることで Firefox・IE6 とも
動作しました。

table-row は CSS2 以降なようなので、なるべく多くのブラウザに
対応させることを考えると、display='table-row' とするよりは、
display='' で初期値に戻した方がよいのかも、と思いました
(display='' が初期値に戻す、という意味かどうかはわかりませんが)。

> このような表示/非表示の切り替えというパターンでは、私は
> classNameの変更で対応しますが。
なるほど、こんな感じでしょうか。

<style type="text/css">
<!--
 .hidden { display: none }
-->
</style>

<script language="javascript">
<!--
 function display_change(classname){
    var tbody = document.getElementById('tbody');
    var trs = tbody.getElementsByTagName('tr');
    for ( var i=0 ; i<trs.length ; i++ ){
       var tr = trs[i];
       tr.className = classname;
    }
 }
// -->
</script>

<input type="button" value="各行表示" onclick="display_change('');">
<input type="button" value="各行非表示" onclick="display_change('hidden');">


4:[回答] ミツ [2005/07/10 11:52 ]

元々style属性は未指定なので
'block'や'table-row'を指定するのではなく、未指定に戻してやってはどうでしょうか?

display_change('block')

display_change('')


5:[回答] ミツ [2005/07/10 12:07 ]

>4
投稿タイミングが遅れて不要な回答になってしまいました。失礼。

ついでなので一つ気になった点を。trのコレクションはDOM1で用意されているのでgetElementsByTagNameは使わなくてもよいかと。

var trs = tbody.getElementsByTagName('tr');
for ( var i=0 ; i<trs.length ; i++ ){
var tr = trs[i];

for ( var i=0 ; i<tbody.rows.length ; i++ ){
var tr = tbody.rows[i];


6:[回答] ぽぽ [2005/07/10 17:51 ]

>>3, >>4
>display='' が初期値に戻す、という意味かどうかはわかりませんが

DOM2 の仕様を一通り眺めてみましたが、該当する記述が見当たりませんでした(見落としていたらすみません)。CSS の display には空の値がありえないので、単純にエラー処理に回されるのかな、と(つまりブラウザ依存?)。

それから、NodeList は「生きて」いますから、for 文で回す場合は NodeList.length の値を別の変数にコピーしておいた方が無難ですし、ループのたびに NodeList にアクセスする必要が無いので若干速いです。
http://d.hatena.ne.jp/jintrick/20050322


7:[完了] B-Cus [2005/07/11 19:29 ]

>>5
ありがとうございます。参考になります。

>>6
> CSS の display には空の値がありえないので
IE6 と Firefox で確認した限りでは display の初期値が
空なので、現実的には問題が起きないのかなと思いました。

とはいえブラウザ依存なのは確かな気がするので、そういう
意味でも className の切り替えの方がよさそうですね。

> それから、NodeList は「生きて」いますから、for 文で回す場合は
> NodeList.length の値を別の変数にコピーしておいた方が無難ですし、
> ループのたびに NodeList にアクセスする必要が無いので若干速いです。
「生きて」いる件については異存はないのですが、速度については
ある意味 富豪的プログラミングと言えなくもないかなぁと最近考えて
います (もちろんケースバイケースですが)。

いまどきの Cコンパイラであれば memcpy や strlen などは関数呼び出しに
せず自前のコードで置き換えてくれますが、それと同様にループ内部で
NodeList の個数が変わっていかなったら勝手に最適化してくれたりすると
いいなと思っています。


8:[完了] ぽぽ [2005/07/12 00:24 ]

完了ですが、面白い話題だったので…。

>>7
>IE6 と Firefox で確認した限りでは display の初期値が空なので

HTMLElement.style の各プロパティ値は、style 属性で明示的に与えられない限り未指定のままです。文書内のスタイルの初期値を得たい場合は ViewCSS インターフェースを使用します(IE の場合は HTMLElement.currentStyle)。

以下は Mozilla 1.8 の場合。

alert( tr.style.display ); // ''
alert( window.getComputedStyle(tr, null).getPropertyValue('display') ); // 'table-cell'

Mozilla の場合、display に「ありえない値」を与えると初期値に戻ります。

tr.style.display = 'IMPOSSIBLE';
alert( tr.style.display ); // ''
alert( window.getComputedStyle(tr, null).getPropertyValue('display') ); // 'table-cell'

http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/CSS/CSSStyleDeclaration.html#CSSStyleDeclaration-setProperty
の SYNTAX_ERR に該当すると思いますが、ここには初期値に関する言及が見当たりませんでした。


9:[完了] ぽぽ [2005/07/12 00:43 ]

× 'table-cell' → ○ 'table-row'
ですね。失礼しました。

# 実は私も今まで display = '' とやっっていて、ふと気になったものですから…。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World