2011-12-19 22 views
2

私が設計している個人用サイトのテンプレートページを作成しています。ログインフォームにドロップダウンDIVタグを使用します。Element.hidden可変移植性

私はまた、私の主なテストなどのブラウザとしてGoogle Chromeを使用しており、表示されているすべての要素がブール値を保持する 'hidden'というプロパティを持つように見えます。

期待どおりに動作し、Trueに設定すると非表示になり、Falseに設定すると表示されます。

document.getElementById("element").hidden = true; 
document.getElementById("element").hidden = false; 

奇妙なことに、Firefox 8.0.1でも同じように処理されます。

私のGoogle-fuはこれに関する情報を表示できませんでしたので、なぜこれが動作しているように見えていますか、他の多くのブラウザがこれをサポートしていますか?

私が作成しているこのウェブサイトは私の個人的な使用のためであり、クロスブラウザ互換性は意図されていませんが、良い副作用であると付け加えます。何をやっている

+0

は、あなたが '可視性' CSSについて話している - もしそうなら、私が言う楽しんでほぼ100%のサポート。 – Codecraft

+0

いいえ、これは厳密にJavaScriptのものです。私は質問に例を追加しました。 – Raceimaztion

答えて

5

hiddenはHTML5で導入された新しいグローバル属性です。つまり、現代のブラウザではブラウザのサポートはかなり良いはずですが、IE8やIE9ではサポートされません。脇に、hidden属性の使用はおそらく間違っています。

このBoolean属性は、要素がまだないことを示していない、またはもはや、関連。たとえば、ログインプロセスが完了するまで使用できないページの要素を隠すために使用できます。ブラウザはそのような要素をレンダリングしません。

あなたのログインフォームは、もはや関連性のないページの一部ではなく、単にプレゼンテーションの一部として隠されています。したがって、代わりにCSSを使用する必要があります。詳細については、以下を参照してください。

+0

ああ、すばらしい答え!今、このためにCSSルールをどのように使うのがベストかを理解する... – Raceimaztion

0

はやってと同じです:

<div hidden="true"></div> 

私はあなただけで行うことをお勧めしかし:

document.getElementById('question').style.display = 'none'; 
+0

これはブラウザの互換性に関する彼の質問とどのように関連していますか?あなたは 'div'タグを閉じるのに間違いをしました –

+3

これは質問への答えを提供しません。批評をしたり、著者の説明を求めるには、投稿の下にコメントを残してください。 – Jaap

+0

@Jaapそれは2011年のPeeHaaでした:D –