CSS से एलिमेंट्स की विजिबिलिटी नियंत्रित करना

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' बटन पर क्लिक करने के बाद: