CSS Tips: visibility Property การซ่อนและการแสดงให้เห็น

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 362
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

CSS Tips: visibility Property การซ่อนและการแสดงให้เห็น

โพสต์โดย abdkode » 10/04/2019 2:51 pm

ใน CSS จะมี property หรือ คุณสมบัติที่ชื่อว่า visibility Property, Property นี้ใช้เพื่อระบุว่าองค์ประกอบ(element)สามารถมองเห็นได้หรือไม่ให้มองเห็นในเว็บ และหลายคนอาจจะสบสนกับ display ถ้า display จะเป็นการกำหนดเลยว่าลักษณะการแสดงเป็นยังไง เช่นถ้าเป็น none ก็จะไม่มีเลย ให้นึกถึงคำภาษาไทย ระหว่างซ่อน กับ ไม่มี (visibility:hidden vs. display:none) ถ้าซ่อน มันก็เหมือนกับกล่องใสๆวางอยู่ แต่มองไม่เห็น ถ้าไม่มีก็คือไม่มี แม้มันยังอยู่แต่เหมือนกับอยู่ใต้พื้นใต้พรม

รูปแบบ Sintax ของ property นี้

โค้ด: เลือกทั้งหมด

visibility: visible|hidden|collapse|initial|inherit;


visible : เป็นค่าเริ่มต้น องค์ประกอบที่แสดงจะสามารถมองเห็นได้ตามปกติบนเว็บ
  • visibility: visible ;
ตัวอย่างโค้ด

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            color:green;
         }
         .mindphp {
            visibility: visible;
         }
         body {
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h1>Mindphp</h1>
      <h2>visibility:visible;</h2>
      <p class="mindphp">Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</h2>
   </body>
</html>                        

ผลลัพธ์ที่ได้ดังนี้
visibility1.jpg
visibility1.jpg (16.54 KiB) เปิดดู 508 ครั้ง

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

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

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            color:green;
         }
         .mindphp {
            visibility: hidden;
         }
         body {
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h1>Mindphp</h1>
      <h2>visibility:hidden;</h2>
      <p class="mindphp">Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</h2>
   </body>
</html>                        

ผลลัพธ์ที่ได้
visibility2.jpg
visibility2.jpg (9.13 KiB) เปิดดู 508 ครั้ง

แท็ก p ที่เราเขียนข้อความยาวๆ จะหายไป ซึ่งในที่มันไม่ได้หายไปไหน เพียงแค่มันถูกซ่อนอยู่ ถ้าตรวจโค้ด โดยการกด F12 จะเห็นว่าโค้ดแท็ก p ยังมีอยู่

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

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
   <head>
      <style>
         table.mindphp {
            visibility: collapse
         }
         table, th, td {
         border:1px solid red;
         p {
         color:green;
         font-size:25px;
         }
      </style>
   </head>
   <body>
      <center>
      <h1 style="color:green;">Mindphp</h1>
      <h2>visibility:collapse;</h2>
      <p>Mindphp</p>
      <table style="border:1px solid red;" class="mindphp">
         <tr>
            <th>PHP</th>
            <th>ERP</th>
            <th>Python</th>
         </tr>
      </table>
      <p>Mindphp.com สอนเขียนโปรแกรมด้วย PHP สอน OOP ฐานข้อมูล สอน ทำเว็บ Joomla phpBB OpenERP.</p>
      </center>
   </body>
</html>               

ผลลัพธ์ที่ได้
visibility3.jpg
visibility3.jpg (20.02 KiB) เปิดดู 508 ครั้ง

จากผลลัพธ์ จะเห็นว่า เนื้อหาส่วนของตารางจะหายไปแต่ถ้า้ราตรวจสอบโค้ดและจะเห็นโครงสร้างตารางยังมีอยู่แต่มองไม่เห็นครับ
visibility4.jpg
visibility4.jpg (17.88 KiB) เปิดดู 508 ครั้ง

เราสามารถนำไปประยุกต์ใช้ได้ร่วมกับ Javascript และ JQuery ได้เพื่อเพิ่มลูกเล่นให้น่าสนใจมากขึ้นครับ

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML & CSS
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 10 และ บุคคลทั่วไป 0 ท่าน