มีสิ่งที่ตรงกันข้ามไหมที่จะแสดง: ไม่มี?

ตรงข้ามคือvisibility: hidden visibility: visibleในทำนองเดียวกันมีสิ่งใดที่ตรงกันข้ามdisplay: noneหรือ?

หลายคนสับสนในการหาวิธีแสดงองค์ประกอบเมื่อมีdisplay: noneเนื่องจากไม่ชัดเจนเท่ากับการใช้visibilityคุณสมบัติ

ฉันสามารถใช้visibility: hiddenแทนได้display: noneแต่มันไม่ได้ให้ผลเหมือนกันดังนั้นฉันจึงไม่ไปด้วย

display: noneไม่ได้มีตัวอักษรเหมือนvisibility:hiddenกัน

visibilityคุณสมบัติตัดสินใจว่าองค์ประกอบที่สามารถมองเห็นได้หรือไม่ ดังนั้นจึงมีสองสถานะ ( visibleและhidden) ซึ่งอยู่ตรงข้ามกัน

อย่างไรก็ตามdisplayคุณสมบัติจะตัดสินใจว่าสิ่งใดจะเป็นไปตามกฎการจัดวางองค์ประกอบ มีกฎหลายชนิดที่แตกต่างกันสำหรับองค์ประกอบที่จะวางโครงสร้างตัวเองใน CSS ดังนั้นจึงมีค่าที่แตกต่างกัน (block , inline, inline-blockฯลฯ - ดูเอกสารสำหรับค่าเหล่านี้ได้ที่นี่ )

display:none ลบองค์ประกอบออกจากเค้าโครงหน้าทั้งหมดราวกับว่าไม่ได้อยู่ที่นั่น

ค่าอื่น ๆ ทั้งหมดสำหรับ displayสาเหตุองค์ประกอบจะเป็นส่วนหนึ่งของหน้าดังนั้นในความรู้สึกที่พวกเขากำลังทั้งหมดที่display:noneตรงข้ามกับ

แต่ไม่มีค่าใดที่เป็นการสนทนาโดยตรงdisplay:noneเช่นเดียวกับที่ไม่มีทรงผมที่ตรงข้ามกับ "หัวล้าน"

ตรงกันข้ามกับที่แท้จริงdisplay: noneยังไม่มี (ยัง)

แต่display: unsetใกล้มากและใช้งานได้ในกรณีส่วนใหญ่

จากMDN (Mozilla Developer Network):

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

(ที่มา: https://developer.mozilla.org/docs/Web/CSS/unset )

โปรดทราบว่าdisplay: revertขณะนี้มีการพัฒนา ดูMDNสำหรับรายละเอียด

เมื่อมีการเปลี่ยนแปลงขององค์ประกอบdisplayใน Javascript ในหลายกรณีเป็นตัวเลือกที่เหมาะสมในการ 'ยกเลิก' ผลมาจากการมีelement.style.display = "none" element.style.display = ""สิ่งนี้จะลบการdisplayประกาศจากstyleแอ็ตทริบิวต์ซึ่งจะคืนค่าdisplayคุณสมบัติที่แท้จริงให้กลับเป็นค่าที่ตั้งไว้ในสไตล์ชีทสำหรับเอกสาร (เป็นค่าเริ่มต้นของเบราว์เซอร์ แต่วิธีการที่เชื่อถือได้มากขึ้นคือการมีคลาสใน CSS เช่น

.invisible { display: none; }

และเพิ่ม / element.classNameไปลบชื่อชั้นนี้จาก

คุณสามารถใช้ได้

display: normal;

มันทำงานได้ตามปกติ .... มันเป็นแฮ็คขนาดเล็กใน css;)

ฉันใช้ display:block; มันได้ผลกับฉัน

เช่นเดียวกับ Paul อธิบายว่าไม่มีตัวอักษรตรงข้ามกับจอแสดงผล: ไม่มีใน HTML เนื่องจากแต่ละองค์ประกอบมีจอแสดงผลเริ่มต้นที่แตกต่างกันและคุณสามารถเปลี่ยนการแสดงผลด้วยคลาสหรืออินไลน์สไตล์เป็นต้น

อย่างไรก็ตามหากคุณใช้บางอย่างเช่น jQuery ฟังก์ชั่นการแสดงและซ่อนของพวกเขาจะทำงานเหมือนกับว่าไม่มีการแสดงผลที่ตรงกันข้าม เมื่อคุณซ่อนจากนั้นแสดงองค์ประกอบอีกครั้งมันจะแสดงในลักษณะเดียวกับที่ทำก่อนที่มันจะถูกซ่อน พวกเขาทำสิ่งนี้โดยการเก็บค่าเก่าของคุณสมบัติการแสดงผลในการซ่อนองค์ประกอบเพื่อที่เมื่อคุณแสดงมันอีกครั้งมันจะแสดงในลักษณะเดียวกับที่มันทำก่อนที่คุณจะซ่อนมัน https://github.com/jquery/jquery/blob/740e190223d19a114d5373758127285d14d6b71e/src/css.js#L180

ซึ่งหมายความว่าหากคุณตั้งค่า div เพื่อแสดง inline หรือ inline-block และคุณซ่อนมันแล้วแสดงอีกครั้งมันจะแสดงอีกครั้งเป็น display inline หรือ inline-block เหมือนเดิม

<div style="display:inline" >hello</div>
<div style="display:inline-block">hello2</div>
<div style="display:table-cell" >hello3</div>

สคริปต์:

  $('a').click(function(){
        $('div').toggle();
    });

โปรดสังเกตว่าคุณสมบัติการแสดงผลของ div จะคงที่แม้จะถูกซ่อนอยู่ (display: none) และแสดงอีกครั้ง

ในกรณีของสไตล์ชีทที่เหมาะกับเครื่องพิมพ์ฉันใช้สิ่งต่อไปนี้:

/* screen style */
.print_only { display: none; }

/* print stylesheet */
div.print_only { display: block; }
span.print_only { display: inline; }
.no_print { display: none; }

ฉันใช้สิ่งนี้เมื่อฉันต้องการพิมพ์แบบฟอร์มที่มีค่าและฟิลด์อินพุตนั้นพิมพ์ได้ยาก ดังนั้นฉันจึงเพิ่มค่าที่ห่อไว้ในแท็ก span.print_only (div.print_only ถูกใช้ที่อื่น) จากนั้นนำคลาส. no_print ไปใช้กับฟิลด์อินพุต ดังนั้นบนหน้าจอคุณจะเห็นฟิลด์อินพุตและเมื่อพิมพ์จะมีเฉพาะค่า หากคุณต้องการจินตนาการคุณสามารถใช้ JS เพื่ออัปเดตค่าในแท็ก span เมื่อฟิลด์ถูกอัพเดต แต่นั่นไม่จำเป็นในกรณีของฉัน อาจไม่ใช่วิธีที่ดีที่สุด แต่มันใช้งานได้สำหรับฉัน!

คุณสามารถใช้ display: block

ตัวอย่าง:

<!DOCTYPE html>
<html>
<body>

<p id="demo">Lorem Ipsum</p>

<button type="button" 
onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
<button type="button" 
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

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

ตอนแรกฉันตั้งค่าเป็น display: none แต่แล้ว display: inline-block สำหรับผู้ใช้ที่ฉันต้องการเห็น แต่ฉันประสบปัญหาการจัดรูปแบบที่คุณอาจคาดหวัง (คอลัมน์รวมหรือยุ่งโดยทั่วไป)

วิธีที่ฉันหลีกเลี่ยงมันคือการแสดงตารางก่อนแล้วจึงทำ "display: none" สำหรับผู้ใช้ที่ฉันไม่ต้องการเห็นมัน วิธีนี้มันจัดรูปแบบตามปกติ แต่ก็หายไปได้ตามต้องการ

บิตของการแก้ปัญหาด้านข้าง แต่อาจช่วยใครบางคน!

ตรงข้ามกับ 'none' คือ 'flex' ขณะทำงานกับ native native

ทัศนวิสัย: ซ่อนจะซ่อนองค์ประกอบ แต่องค์ประกอบเป็นของพวกเขากับ DOM และในกรณีที่แสดง: ไม่มีมันจะลบองค์ประกอบจาก DOM

ดังนั้นคุณมีตัวเลือกสำหรับองค์ประกอบที่จะซ่อนหรือเลิกซ่อน แต่เมื่อคุณลบ (ฉันหมายถึงไม่แสดงเลย) มันจะไม่ตรงข้ามกับค่าที่ชัดเจน จอแสดงผลมีหลายค่าเช่น display: block, display: inline, display: inline-block และอื่น ๆ อีกมากมาย คุณสามารถตรวจสอบได้จาก W3C

คำตอบที่ดีที่สุดdisplay: noneคือ

display:inline

หรือ

display:normal

คุณสามารถใช้สิ่งนี้display:block;และเพิ่มoverflow:hidden;

"ตรงกันข้าม" ที่ดีที่สุดจะกลับไปเป็นค่าเริ่มต้นซึ่งก็คือ:

display: inline