ฉันใช้visibility:hiddenเพื่อซ่อนองค์ประกอบบางอย่าง แต่พวกเขายังคงใช้พื้นที่บนหน้าเว็บในขณะที่ซ่อนอยู่
ฉันจะทำให้พวกเขาหายตัวไปอย่างสิ้นเชิงได้อย่างไรราวกับว่าพวกเขาไม่ได้อยู่ใน DOM เลย (แต่ถ้าไม่ได้ลบพวกเขาออกจาก DOM)?
ฉันใช้visibility:hiddenเพื่อซ่อนองค์ประกอบบางอย่าง แต่พวกเขายังคงใช้พื้นที่บนหน้าเว็บในขณะที่ซ่อนอยู่
ฉันจะทำให้พวกเขาหายตัวไปอย่างสิ้นเชิงได้อย่างไรราวกับว่าพวกเขาไม่ได้อยู่ใน DOM เลย (แต่ถ้าไม่ได้ลบพวกเขาออกจาก DOM)?
คำตอบ:
ลองตั้งค่าdisplay:noneให้ซ่อนและตั้งค่าdisplay:blockให้แสดง
display: blockบางส่วนจะต้องมีการตั้งค่าให้display: inline(เช่น<span>หรือ<a>หรือ<img>องค์ประกอบ DOM)
hidden display: noneเพิ่มคลาสลงในองค์ประกอบเพื่อซ่อนลบออกแสดง เมื่อลบออกdisplayคุณสมบัติจะถูกกู้คืนเป็นองค์ประกอบเริ่มต้น
ใช้สไตล์แทนเช่น
<div style="display:none;"></div>เพื่อใช้display:noneเป็นตัวเลือกที่ดีเพียงเพื่อเอาองค์ประกอบ แต่มันจะเป็นยังลบออก screenreaders นอกจากนี้ยังมีการอภิปรายหากมีผลกระทบต่อ SEO มีบทความสั้น ๆ ที่ดีเกี่ยวกับหัวข้อนั้นใน A List Apart
หากคุณต้องการซ่อนและไม่ลบองค์ประกอบจริงๆควรใช้:
div {
position: absolute;
left: -999em;
}เช่นนี้มันสามารถอ่านได้โดยโปรแกรมอ่านหน้าจอ
ข้อเสียเพียงอย่างเดียวของวิธีนี้คือการแสดงผล DIV จริงและอาจส่งผลต่อประสิทธิภาพโดยเฉพาะบนโทรศัพท์มือถือ
visibility: hidden;ช่วยบอกว่าคุณมีองค์ประกอบอื่น ๆ z-indexแน่นอนพวกเขาจะไม่ได้มีความขัดแย้งสำหรับพื้นที่เพียงความขัดแย้งทางผล เพียงเพื่อซ่อนองค์ประกอบที่ฉันจะไปด้วยvisibility
ดูแทนการใช้การใช้งานvisibility: hidden; display: none;ตัวเลือกแรกจะซ่อน แต่ยังคงใช้พื้นที่และตัวเลือกที่สองจะซ่อนและไม่ใช้พื้นที่ใด ๆ
คำตอบสำหรับคำถามนี้บอกว่าใช้ display: none และ display: block แต่สิ่งนี้ไม่ได้ช่วยใครบางคนที่พยายามใช้การเปลี่ยน css เพื่อแสดงและซ่อนเนื้อหาโดยใช้คุณสมบัติการมองเห็น
สิ่งนี้ทำให้ฉันบ้าด้วยการใช้จอแสดงผลฆ่าการเปลี่ยน CSS ใด ๆ
ทางออกหนึ่งคือการเพิ่มสิ่งนี้ลงในคลาสที่ใช้การมองเห็น:
overflow:hiddenเพื่อให้การทำงานนี้ขึ้นอยู่กับเค้าโครง แต่ควรเก็บเนื้อหาว่างไว้ใน div ที่อยู่
จอแสดงผล: ไม่มีวิธีการแก้ปัญหาที่ซ่อนองค์ประกอบอย่างสมบูรณ์ด้วยพื้นที่ของมัน
display:noneและvisibility: hiddenvisibility:hidden หมายความว่ามองไม่เห็นแท็ก แต่มีการจัดสรรพื้นที่บนแท็ก
display:noneหมายถึงการซ่อนองค์ประกอบอย่างสมบูรณ์ด้วยพื้นที่ของมัน (แม้ว่าคุณจะยังสามารถโต้ตอบกับมันผ่าน DOM)
display:noneเพื่อซ่อนและตั้งค่าdisplay:blockให้แสดง
as though they are not in the DOM at all (but without actually removing them from the DOM)
visibility: hiddenหยุดการแสดงเนื้อหาเท่านั้น แต่ยังคงใช้พื้นที่แนวตั้ง / แนวนอนแสดง: ไม่มีลบพื้นที่แนวตั้ง / แนวนอนสำหรับองค์ประกอบ
การสลับdisplayไม่อนุญาตสำหรับการเปลี่ยน CSS ที่ราบรื่น แต่สลับทั้งในและvisibilitymax-height
visibility: hidden;
max-height: 0;transform: translateX(-100%)เพราะเราจะซ่อนองค์ประกอบที่อยู่นอกพื้นที่ที่มองเห็นโดยใช้สิ่งที่ต้องการ เราไม่ต้องการdisplay: none
นี่คือสิ่งที่แตกต่างออกไปในการนำพวกเขากลับมาหลังจากที่แสดง: ไม่มี อย่าใช้ display: block / inline เป็นต้นแทน (หากใช้ javascript) ให้ตั้งค่าคุณสมบัติ css display เป็น '' (เช่นว่างเปล่า)
$('#abc').css({"display":"none"});วิธีนี้จะซ่อนเนื้อหาและไม่เว้นที่ว่าง
เหนือความรู้ของฉันมันเป็นไปได้ใน 4 วิธี
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);จอแสดงผล: ไม่มีสิ่งที่ดีที่สุดในการหลีกเลี่ยงพื้นที่สีขาวในเพจ
ใช้!importantหากคุณถูกบังคับให้แทนที่สไตล์ CSS ที่มีอยู่
display: none !important;
offsetTopและdisplay:noneตั้งค่าเป็นoffsetTop0 วิธีแก้ปัญหาของฉันที่นี่คือใช้visibility: hiddenจากนั้นตั้งค่าความกว้างและความสูงเป็น 0 เมื่อฉันต้องการให้องค์ประกอบมองเห็นได้อีกครั้งฉันลบแอตทริบิวต์สามรายการโดยใช้ จาวาสคริ โซลูชันแฮ็คเล็กน้อย แต่ใช้ได้ดีสำหรับกรณีใช้งานเกือบทั้งหมด