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

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

มีสองวิธีหลักในการซ่อนองค์ประกอบใน CSS โดยใช้:

จอแสดงผล:ไม่มีแอตทริบิวต์
การมองเห็น:คุณลักษณะที่ซ่อนอยู่

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

องค์ประกอบซ่อน CSS:จอแสดงผล

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

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

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

เมื่อคุณตั้งค่า display หากไม่มีเลย องค์ประกอบที่ได้รับผลกระทบจะหายไป ซึ่งหมายความว่าองค์ประกอบจะไม่กินพื้นที่บนหน้าเว็บอีกต่อไป

จอแสดงผล:ไม่มี ตัวอย่าง

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

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

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

คลิกที่ วิธีซ่อนองค์ประกอบใน CSS:บทช่วยสอนทีละขั้นตอนที่ครอบคลุม ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS ของเรา

เรากำหนดองค์ประกอบสามรายการภายในแท็ก HTML

องค์ประกอบ

ใช้เพื่อสร้างส่วนหัวของเรา และมีข้อความ เกี่ยวกับเรา . องค์ประกอบ HTML ของเราสร้างรูปภาพเค้กซึ่งมีความสูง 200px และกว้าง 200px องค์ประกอบ
มีคำอธิบายสั้น ๆ เกี่ยวกับสโมสร

ในโค้ด CSS ของเรา เราใช้ตัวเลือก “img” เพื่อเลือกแท็กรูปภาพทั้งหมดบนหน้าของเรา กฎนี้ตั้งค่าคุณสมบัติการแสดงผลของแท็ก ทั้งหมดเป็น ไม่มี . หรืออีกนัยหนึ่ง กฎสไตล์จะซ่อนรูปภาพของเรา

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

คุณสามารถกำหนดกฎนี้เป็นแอตทริบิวต์ HTML แบบอินไลน์:

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติ HTML และ CSS แบบอินไลน์ โปรดดูคำแนะนำ CSS แบบอินไลน์ของเรา

องค์ประกอบซ่อน CSS:การมองเห็น

คุณสมบัติการมองเห็น CSS ใช้เพื่อควบคุมว่าองค์ประกอบจะปรากฏบนหน้าเว็บหรือไม่

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

กฎสไตล์ต่อไปนี้จะตั้งค่าการมองเห็นขององค์ประกอบให้ซ่อนไว้:

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

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

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

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

การมองเห็น CSS เทียบกับการแสดงผล

ทั้งสองวิธีที่เราได้กล่าวถึงในการซ่อนองค์ประกอบดูเหมือนจะเหมือนกัน แต่มีความแตกต่างระหว่างทั้งสอง

การแสดงผล:ไม่มี กฎลบองค์ประกอบออกจากเอกสาร HTML แม้ว่ารหัสสำหรับองค์ประกอบที่ซ่อนอยู่จะยังคงปรากฏอยู่ แต่องค์ประกอบนั้นจะไม่ปรากฏให้เห็น

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

วิธีซ่อนองค์ประกอบใน CSS:บทช่วยสอนทีละขั้นตอนที่ครอบคลุม

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

Venus วิศวกรซอฟต์แวร์ที่ Rockbot

ค้นหาการแข่งขัน Bootcamp ของคุณ

บทสรุป

การแสดงผล:ไม่มี กฎลบองค์ประกอบออกจากเอกสารและซ่อนจากมุมมอง การมองเห็น:ซ่อนอยู่ กฎซ่อนองค์ประกอบในเอกสารและเว้นช่องว่างที่องค์ประกอบจะปรากฏว่างเปล่า

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