การควบคุมการมองเห็นขององค์ประกอบด้วย CSS Visibility

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

ค่าของ CSS Visibility ต่อไปนี้ใช้ควบคุมการมองเห็นขององค์ประกอบ:

ตัวอย่าง

ลองดูตัวอย่างของคุณสมบัติ CSS Visibility:

<!DOCTYPE html> <html> <head> <title>CSS Visibility collapse</title> <style> form ,table{    width:70%;    margin: 0 auto;    text-align: center; } table, th, td {    border-collapse: collapse;    border: 1px solid black; } thead {    background-color: goldenrod; } tbody{    background-color: khaki; } tr:nth-of-type(3){    visibility: collapse; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-collapse</legend> <table> <thead> <tr><th>Name</th><th>Course</th></tr> </thead> <tbody> <tr><td>Joana</td><td>MBA</td></tr> <tr><td>Smith</td><td>B.Arc</td></tr> <tr><td>Xersus</td><td>M.Sc</td></tr> </tbody> </table> </fieldset> </form> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ไม่ได้ใช้ CSS Visibility collapse:

ใช้ CSS Visibility collapse:

ตัวอย่าง

ลองดูตัวอย่างสำหรับ CSS Visibility hidden:

<!DOCTYPE html> <html> <head> <title>CSS Visibility hidden</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px;    box-sizing: border-box; } input[type="button"] {    border-radius: 10px; } .child{    display: inline-block;    height: 40px;    width: 40px;    color: white;    border: 4px solid black; } .child:nth-of-type(1){    background-color: #FF8A00; } .child:nth-of-type(2){    background-color: #F44336; } .child:nth-of-type(3){    background-color: #C303C3; } .child:nth-of-type(4){    background-color: #4CAF50; } .child:nth-of-type(5){    background-color: #03A9F4; } .child:nth-of-type(6){    background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-hidden</legend> <div id="container"> <div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div> </div><br> <input type="button" value="Hide Primary Colors" onclick="visibilityHidden()"> </fieldset> </form> <script> var primaryColor = document.getElementsByClassName('primary'); function visibilityHidden(){    for(var i=0; i<3; i++)    primaryColor[i].style.visibility = 'hidden'; } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ก่อนคลิกปุ่ม 'Hide Primary Colors':

หลังคลิกปุ่ม 'Hide Primary Colors':