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

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

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

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

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

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

ใน 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) Viewed 3378 times
มันเป็นค่าเริ่มต้นที่หมายถึงแสดงให้เห็น จะไม่ถูกซ่อนเอาไว้ ผลลัพธ์ที่ก็ไม่มีอะไรเปลี่ยนแปรง เราเขียนมายังไงก็แสดงตามนั้น

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) Viewed 3378 times
แท็ก 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) Viewed 3378 times
จากผลลัพธ์ จะเห็นว่า เนื้อหาส่วนของตารางจะหายไปแต่ถ้า้ราตรวจสอบโค้ดและจะเห็นโครงสร้างตารางยังมีอยู่แต่มองไม่เห็นครับ
visibility4.jpg
visibility4.jpg (17.88 KiB) Viewed 3378 times
เราสามารถนำไปประยุกต์ใช้ได้ร่วมกับ Javascript และ JQuery ได้เพื่อเพิ่มลูกเล่นให้น่าสนใจมากขึ้นครับ

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

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

สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 77