คุณจะสร้าง div ที่ซ่อนอยู่ซึ่งไม่ได้สร้างตัวแบ่งบรรทัดหรือพื้นที่แนวนอนได้อย่างไร

354

ฉันต้องการช่องทำเครื่องหมายที่ซ่อนอยู่ซึ่งไม่ใช้พื้นที่บนหน้าจอ

ถ้าฉันมีสิ่งนี้:

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

ฉันไม่เห็นช่องทำเครื่องหมาย แต่มันก็ยังสร้างบรรทัดใหม่

ถ้าฉันมีสิ่งนี้:

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

มันไม่ได้สร้างบรรทัดใหม่ แต่ใช้พื้นที่แนวนอนบนหน้าจอ

มีวิธีที่จะมี div ที่ซ่อนอยู่ซึ่งไม่ใช้พื้นที่ (แนวตั้งหรือแนวนอน)?

html hidden

— leora
แหล่งที่มา

มีการใช้งานสำหรับ div ดังกล่าวหรือไม่?

— Jonno_FTW

6

@ จอนโน่: มันมักใช้ใน AJAX สมมติว่าคุณมีรายการสิ่งของที่มีรูปสามเหลี่ยมการเปิดเผย คุณต้องการรายละเอียดหรือแผนผังย่อยปรากฏขึ้นเมื่อผู้ใช้คลิกที่สามเหลี่ยมการเปิดเผย ดังนั้นสิ่งที่คุณทำคือใส่ <div id = "theID" style = "display: none;"> โดยที่รายละเอียดควรไป จากนั้นเมื่อผู้ใช้คลิกที่รูปสามเหลี่ยมคุณย้ายรูปสามเหลี่ยมไปยังตำแหน่ง "ครึ่งทาง" (ชี้ไปทางทิศตะวันออกเฉียงใต้) และดับคำขอ AJAX เพื่อเติมลงใน <div> เมื่อคำขอ AJAX เสร็จสิ้นคุณหมุนสามเหลี่ยมไปทางใต้และลบ "display: none;" จากสไตล์ของ <div> ไลบรารี script.aculo.us ทำสิ่งนี้ได้มากมาย

— Mike DeSimone

715

ใช้ display:none;

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

visibility: hidden ซ่อนองค์ประกอบ แต่ยังคงใช้พื้นที่ในเค้าโครง
display: none เอาองค์ประกอบทั้งหมดออกจากเอกสารโดยไม่ใช้พื้นที่ใด ๆ

— CMS
แหล่งที่มา

42

เพื่อแสดง div ใหม่อีกครั้ง (ในกรณีที่ความต้องการของทุกคนเช่นเดียวกับฉัน) -<div id="divCheckbox" style="display: inline-block;">

— anujin

14

@anujin: ทำไมinline-blockล่ะ ค่าเริ่มต้นdisplayสำหรับ div คือblock!

— MMM

มีวิธีทำในสิ่งที่ตรงกันข้ามหรือไม่? หากต้องการเปลี่ยน div จากdisplay: noneเป็นdisplay: inline-blockหรือเทียบเท่าโดยไม่มี div ที่แสดงในขณะนี้ใช้พื้นที่และย้ายองค์ประกอบ DOM อื่น ๆ ของฉันไปรอบ ๆ

— bpromas

1

อาจคุ้มค่าที่จะอัปเดตคำตอบเพื่อรวมแอตทริบิวต์ HTML ทั่วโลกที่ซ่อนอยู่ซึ่งมีให้ตั้งแต่HTML5.1ซึ่งโดยพื้นฐานแล้วเหมือนกับที่พูดdisplay: noneถึงแม้ว่าจะมาจาก HTML โดยตรง อย่างไรก็ตามการใช้งานของdisplayคุณสมบัติใด ๆแทนที่พฤติกรรมของhiddenคุณลักษณะทั่วโลก

— Marius Mucenicu

54

ตั้งแต่การเปิดตัวHTML5สามารถทำได้โดยง่าย:

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

หมายเหตุ:นี่ไม่รองรับเบราว์เซอร์รุ่นเก่าบางรุ่นโดยเฉพาะอย่างยิ่ง IE <11

เอกสารแอตทริบิวต์ที่ซ่อนอยู่ ( MDN , W3C )

— C_B
แหล่งที่มา

1

สิ่งนี้ถูกต้องทางอรรถศาสตร์มากกว่าการซ่อนด้วย CSS จะดีกว่าสำหรับการเข้าถึงและเบราว์เซอร์หลัก ๆ ทุกตัวสนับสนุน ควรเป็นคำตอบที่ยอมรับในปี 2020

— Robin Métral

29

style="display: none;"ใช้ นอกจากนี้คุณอาจไม่จำเป็นต้องมี DIV เพียงแค่ตั้งค่าสไตล์display: noneเป็นช่องทำเครื่องหมายก็น่าจะเพียงพอแล้ว

— tvanfosson
แหล่งที่มา

ฉันต้องซ่อนข้อความแจ้งเตือนเมื่อโหลดหน้าเว็บและต้องการแสดงอีกครั้งเมื่อคลิกปุ่ม พยายามแล้วvisibility: hiddenแต่นั่นก็แสดงพื้นที่ว่างเปล่า style="display: none;"ทำงานเหมือนเสน่ห์เล็ก ๆ น้อย ๆ :)

— sohaiby

8

นอกเหนือจากคำตอบของ CMS may คุณอาจต้องการลองใส่สไตล์ในสไตล์ชีทภายนอกและกำหนดสไตล์ให้กับไอดีเช่นนี้:

#divCheckbox {
display: none;
}

— ซีตาทู
แหล่งที่มา

+1 นั่นเป็นคำแนะนำที่ดี แต่จะแสดงช่องทำเครื่องหมายเพียงช่องเดียวโดยไม่กระทบต่อการมองเห็นช่องทำเครื่องหมายอื่น ๆ ทั้งหมดได้อย่างไร

— Owais Qureshi

1

@dNetNetSoldier คำถามเก่า แต่ควรมีคำตอบที่นี่ คุณมีคลาส css ชื่อ invis และคุณเพิ่ม / ลบออกจากช่องทำเครื่องหมายหรือ div โดย id โดยใช้ JS

— DanielST

8

เนื่องจากคุณควรมุ่งเน้นไปที่การใช้งานและข้อมูลทั่วไปใน CSS แทนที่จะใช้ id เพื่อชี้ไปที่องค์ประกอบเลย์เอาต์ที่เฉพาะเจาะจง (ซึ่งส่งผลให้มีไฟล์ css ขนาดใหญ่หรือหลายไฟล์) คุณควรใช้คลาสจริงในไฟล์. css ที่เชื่อมโยงแทน

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

หรือเรียบง่าย:

.hidden {
display: none;
}

ตอนนี้คุณสามารถสมัครผ่านทาง:

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

— เดฟ
แหล่งที่มา

รหัสดูสะอาดขึ้นมากด้วยวิธีนี้! ฉันชอบที่จะมีชั้นเรียนมากกว่าสไตล์อินไลน์

— Harry Cho

5

ลองใช้<span>เพื่อแยกมาร์กอัปส่วนเล็ก ๆ เพื่อจัดสไตล์โดยไม่ทำให้เลย์เอาต์เสียหาย นี่จะดูเหมือนเป็นสำนวนมากกว่าการพยายามบังคับ<div>ไม่ให้แสดงตัวเอง - ถ้าอันที่จริงแล้วช่องทำเครื่องหมายตัวเองไม่สามารถจัดรูปแบบในแบบที่คุณต้องการ

— ริชเชิร์ช
แหล่งที่มา

4

แสดง / ซ่อนด้วยการคลิกเมาส์:

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

ที่มา: ที่นี่

— มาห์ Jazini
แหล่งที่มา

4

เพื่อป้องกันไม่ให้ช่องทำจากสละพื้นที่ใด ๆโดยไม่ต้องถอดออกจาก DOM hiddenการใช้

<div hidden id="divCheckbox">

เพื่อป้องกันไม่ให้ช่องจากการเพิ่มพื้นที่ว่างใด ๆ และยังถอดมันออกมาจาก DOM display: noneใช้

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

— smac89
แหล่งที่มา

3

หากต้องการซ่อนองค์ประกอบที่มองเห็นแต่เก็บไว้ใน 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 ดังนั้นฟังก์ชันบางอย่างอาจใช้งานไม่ได้หากพวกเขาต้องการเข้าถึงบางสิ่งในองค์ประกอบที่ซ่อนอยู่

— THN
แหล่งที่มา

0

display: none;

ขยายตัวอย่างข้อมูล

สิ่งนี้จะทำให้องค์ประกอบหายไปและไม่ใช้พื้นที่ใด ๆ

— Jose Luis Rasmussen Garcia
แหล่งที่มา

ขอบคุณคนที่แสดงความคิดเห็นในการจัดรูปแบบคำตอบของฉัน

— Jose Luis Rasmussen Garcia