web-dev-qa-db-ja.com

改行や水平方向の空白を作らない隠しdivをどのように作成しますか？

画面上のスペースをとらない隠しチェックボックスが欲しいのですが。

私がこれを持っているならば：

<div id="divCheckbox" style="visibility: hidden">

チェックボックスは表示されませんが、それでも新しい行が作成されます。

私がこれを持っているならば：

<div id="divCheckbox" style="visibility: hidden; display:inline;">

新しい行は作成されなくなりましたが、画面上の水平方向のスペースが占有されます。

スペースをとらない隠れたdivを作る方法はありますか（垂直または水平？

htmlhidden
313
leora

display:none;を使う

<div id="divCheckbox" style="display: none;">

  • visibility: hiddenは要素を隠しますが、それでもレイアウト内のスペースを占有します。

  • display: noneは、ドキュメントから要素を完全に削除します。スペースを取りません。

652
CMS

HTML5 oneのリリース以来、単純にできるようになりました。

<div hidden>This div is hidden</div>

注： これは サポートされていません いくつかの古いブラウザでは、特にIE <11がサポートされています。

非表示属性ドキュメント（ _ mdn _ 、 W3C ）

45
C_B

style="display: none;"を使用してください。また、DIVを用意する必要はおそらくないでしょう。チェックボックスでスタイルをdisplay: noneに設定するだけで十分でしょう。

29
tvanfosson

CMSの答えに加えて、あなたはこのように外部のスタイルシートにスタイルを入れてidにスタイルを割り当てることを考えたいかもしれません：

#divCheckbox {
display: none;
}
8
Zeta Two

特定のレイアウト要素を指すIDを使用するのではなく、CSSの使いやすさと一般性に焦点を当てる必要があるため（おそらく巨大なまたは複数のCSSファイルが作成されます）、リンクされた.cssファイルでは代わりにtrueクラスを使用します。

.hidden {
visibility: hidden;
display: none;
}

あるいはミニマリストのために：

.hidden {
display: none;
}

今、あなたは単にそれを介してそれを適用することができます：

<div class="hidden"> content </div>
7
Dave

レイアウトを分割せずにスタイル設定されるマークアップの小さなセグメントを分離するために<span>を使用することを検討してください。これは、<div>に自分自身を表示させないように強制するよりも慣用的なように思えます。実際には、チェックボックス自体を自分の好みのスタイルにすることはできません。

5
Rich Churcher

マウスクリックで表示/非表示： 

<script language="javascript">

    function toggle() {

        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");

        if (ele.style.display == "block") {

            ele.style.display = "none";
            text.innerHTML = "show";
        }
        else {

            ele.style.display = "block";
            text.innerHTML = "hide";
        }
    }
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here

<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

出典： ここ

4
Mahdi Jazini

チェックボックスがスペースを占有しないようにするには、without DOMから削除します。hiddenを使用します。

<div hidden id="divCheckbox">

チェックボックスがスペースを占有しないようにし、DOMからalsoを削除するには、display: noneを使用します。

<div id="divCheckbox" style="display:none">
4
smac89

要素視覚的を非表示にしてhtmlに保存するには、次のようにします。

<div style='visibility:hidden; overflow:hidden; height:0; width:0;'>
  [content]
</div>

または

<div style='visibility:hidden; overflow:hidden; position:absolute;'>
  [content]
</div>

display:noneの何が問題になる可能性がありますか？ htmlから要素を完全に削除するので、隠し要素内の何かにアクセスする必要がある場合、一部の機能が壊れる可能性があります。

2
THN