วิธีซ่อน Elements ใน CSS: บทช่วยสอนแบบเป็นขั้นตอนครบถ้วน

คุณสามารถซ่อน element ใน CSS ได้โดยใช้ CSS properties display: none หรือ visibility: hidden display: none ลบ element ทั้งหมดออกจากหน้าและอาจส่งผลต่อ layout ของหน้า visibility: hidden ซ่อน element ในขณะที่เก็บพื้นที่ไว้เท่าเดิม

คุณอาจพบสถานการณ์ที่ต้องการซ่อน element บนหน้าเว็บ เช่น คุณอาจมีบล็อกข้อความที่ต้องการให้ซ่อนอยู่และแสดงเมื่อผู้ใช้คลิกปุ่ม

มีสองวิธีหลักสำหรับซ่อน element ใน CSS โดยใช้:

• Attribute display: none
• Attribute visibility: hidden

วิธีแรกอาจส่งผลต่อ layout ของหน้าเว็บของคุณ แต่ วิธีที่สองก็ยังคงเป็นที่นิยม

CSS ซ่อน Element: display

คุณสมบัติ display ควบคุมว่า element แสดงบนหน้าเว็บอย่างไร ทุก element ในเอกสาร HTML มีค่าเริ่มต้นสำหรับคุณสมบัติ display แม้ค่านั้นจะขึ้นอยู่กับ element สำหรับ element ส่วนใหญ่ ค่า display เริ่มต้นคือ block หรือ inline

หากคุณไม่ต้องการให้ element แสดงบนหน้าเลย คุณสามารถตั้งค่าของคุณสมบัติ display เป็น none

กฎสไตล์ต่อไปนี้ซ่อน element บนหน้าเว็บ:

เมื่อคุณตั้งค่าของ display เป็น none element ที่ได้รับผลกระทบจะหายไป หมายความว่า element จะไม่ใช้พื้นที่บนหน้าเว็บอีกต่อไป

ตัวอย่าง display: none

สมมติเรากำลังออกแบบหน้าเว็บ About Us สำหรับชมรมทำอาหารท้องถิ่น ในรูปแบบเริ่มต้น เราเพิ่มรูปภาพเค้กลงในหน้า ตอนนี้ชมรมต้องการให้เราซ่อนรูปภาพเพราะยังไม่แน่ใจ về รูปแบบสุดท้าย

เราสามารถซ่อนรูปภาพบนหน้าด้วยโค้ดต่อไปนี้:

<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p> </div> <style> img { display: none; } <style>

คลิก ปุ่มใน code editor ด้านบนเพื่อดู output ของโค้ด HTML/CSS ของเรา

เรากำหนดสาม elements ภายใน HTML <div> tag Element <h1> ใช้สร้าง header ของเรา และมีข้อความ About Us HTML <img> element ของเราสร้างรูปภาพเค้ก ซึ่งสูง 200px และกว้าง 200px Element <p> มีคำอธิบายสั้นของชมรม

ในโค้ด CSS ของเรา เราใช้ "img" selector เพื่อเลือก image tags ทั้งหมดบนหน้าของเรา กฎนี้ตั้งค่า display property ของทุก <img> tags เป็น none หรือพูดอีกอย่าง กฎสไตล์ซ่อนรูปภาพของเรา

แม้รูปภาพของเราจะถูกซ่อน มันยังคงมีอยู่บนหน้าเว็บของเรา หากเราต้องการนำรูปภาพกลับมา เราสามารถลบสไตล์ display:none; หรือ เราสามารถระบุ display style อื่น (เช่น block หรือ inline)

คุณสามารถกำหนดกฎนี้เป็น inline HTML attribute ได้:

<img style="display: none;" src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />

เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ inline HTML และ CSS properties ดูคู่มือ inline CSS ของเรา

CSS ซ่อน Element: visibility

CSS visibility property ใช้ควบคุมว่า element มองเห็นได้บนหน้าเว็บหรือไม่

โดยค่าเริ่มต้น ค่าของคุณสมบัติ visibility คือ visible อย่างไรก็ตาม หากคุณต้องการทำให้รูปภาพ invisible คุณสามารถตั้งค่าของ visibility เป็น hidden

กฎสไตล์ต่อไปนี้ตั้งค่า visibility ของ element เป็น hidden:

กลับไปที่ตัวอย่างชมรมทำอาหารก่อนหน้า สมมติเราต้องการซ่อนรูปภาพเค้กบนหน้าเว็บ About Us เราสามารถทำได้ด้วยโค้ดนี้:

<html> <div> <h1>About Us</h1> <img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" /> <p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p> </div> <style> img { display: visibility; } <style>

คลิก ปุ่มใน code editor ด้านบนเพื่อดู output ของโค้ด HTML/CSS ของเรา

โค้ด HTML ของเราเหมือนเดิมในตัวอย่างนี้ ในไฟล์ CSS ของเรา แทนที่จะใช้คุณสมบัติ display เราใช้ visibility เพื่อซ่อน element ของเรา ตามที่คุณเห็นข้างต้น รูปภาพของเราถูกซ่อนจากหน้าเว็บ

แม้รูปภาพของเราจะหายไป แต่ตอนนี้มีพื้นที่ว่างระหว่าง header และ paragraph ของเราที่รูปภาพจะถูกวางไว้ นี่คือคุณสมบัติของสไตล์ visibility: hidden; พื้นที่ของ element เดิมยังคงถูกเก็บไว้โดยหน้าเว็บ แต่อย่างไรก็ตาม element ถูกซ่อน

CSS Visibility vs. Display

สองวิธีที่เราพูดถึงเกี่ยวกับการซ่อน element ดูเหมือนจะเหมือนกัน แต่มีความแตกต่างระหว่างสองอย่าง

กฎ display: none ลบ element ออกจากเอกสาร HTML แม้โค้ดสำหรับ element ที่ซ่อนจะยังคงอยู่ element เองจะไม่ถูกแสดง

กฎ visibility: hidden ซ่อน element แต่ element จะยังคงใช้พื้นที่บนหน้าเว็บ หากคุณต้องการซ่อน element แต่เก็บพื้นที่ของ element นั้นบนหน้าเว็บ การใช้กฎ visibility: hidden; เป็นที่ดีที่สุด

"Career Karma เข้ามาในชีวิตฉันเมื่อฉันต้องการมันมากที่สุด และช่วยจับคู่ฉันกับ bootcamp ได้อย่างรวดเร็ว สองเดือนหลังจบ ฉันพบงานฝันที่สอดคล้องกับค่านิยมและเป้าหมายในชีวิต!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

สรุป

กฎ display: none ลบ element ออกจากเอกสารและซ่อนมันจากมุมมอง กฎ visibility: hidden ซ่อน element บนเอกสารและทิ้งพื้นที่ที่ element จะปรากฏว่างไว้

คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ CSS ไหม? อ่านคู่มือ How to Learn CSS ของเรา คู่มือนี้เต็มไปด้วยคำแนะนำที่可操作的 (actionable) เกี่ยวกับวิธีเรียน CSS คุณยังจะพบรายการทรัพยากรชั้นนำที่คุณสามารถใช้เพื่อขยายความรู้ของคุณ