398

画面上のスペースを占有しない非表示のチェックボックスが必要です。

私がこれを持っている場合:

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

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

私がこれを持っている場合:

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

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

スペースをとらない隠しdivを作成する方法はありますか(垂直または水平)?

4

10 に答える 10

807

使用するdisplay:none;

<div id="divCheckbox" style="display: none;">
  • visibility: hidden要素を非表示にしますが、それでもレイアウト内のスペースを占有します。

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

于 2010-01-02T17:02:32.107 に答える
80

HTML5のリリース以降、次のことが簡単にできるようになりました。

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

注:これは、一部の古いブラウザー、特にIE<11ではサポートされていません。

隠し属性のドキュメント(MDNW3C

于 2014-12-18T14:29:48.173 に答える
29

を使用しstyle="display: none;"ます。また、おそらくDIVは必要ありませんdisplay: none。チェックボックスでスタイルをに設定するだけで、おそらく十分です。

于 2010-01-02T17:02:26.180 に答える
9

特定のレイアウト要素を指すためにIDを使用するのではなく、CSSの使いやすさと一般性に焦点を当てる必要があるため(結果として巨大または複数のcssファイルになります)、リンクされた.cssファイルで実際のクラスを使用する必要があります。

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

またはミニマリストの場合:

.hidden {
display: none;
}

これで、次の方法で簡単に適用できます。

<div class="hidden"> content </div>
于 2014-01-29T16:55:32.833 に答える
8

CMSの回答に加えて、次のように、スタイルを外部スタイルシートに配置し、スタイルをIDに割り当てることを検討することをお勧めします。

#divCheckbox {
display: none;
}
于 2010-01-02T18:02:35.857 に答える
8

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

<div hidden id="divCheckbox">

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

<div id="divCheckbox" style="display:none">
于 2018-03-05T15:30:52.997 に答える
5

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

于 2010-01-02T17:09:02.830 に答える
5

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

<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>

出典:こちら

于 2016-11-07T05:45:20.730 に答える
4

要素を視覚的に非表示にし、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から要素を完全に削除するため、非表示の要素内の何かにアクセスする必要がある場合、一部の機能が破損する可能性があります。

于 2018-08-19T17:24:07.950 に答える
2

display: none;

これにより、要素が消え、スペースを占有しなくなります。

于 2020-04-03T11:03:19.283 に答える