हम HTML दस्तावेज़ में क्रमशः CSS दृश्यता और CSS प्रदर्शन गुणों के साथ किसी तत्व को छिपा या हटा सकते हैं। उपयोगकर्ता के लिए, दोनों गुणों में से किसी एक का उपयोग करने में कोई अंतर नहीं लग सकता है, लेकिन वहाँ है।
सीएसएस प्रदर्शन - कोई भी दस्तावेज़ पर तत्व प्रस्तुत नहीं करता है और इस प्रकार इसे कोई स्थान आवंटित नहीं करता है।
सीएसएस दृश्यता - छुपा दस्तावेज़ पर तत्व प्रस्तुत करता है और यहां तक कि स्थान आवंटित किया जाता है लेकिन यह उपयोगकर्ता को दिखाई नहीं देता है।
उदाहरण
आइए CSS डिस्प्ले नो के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<title>CSS Display None</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-Display-None</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="displayNone()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function displayNone(){
for(var i=0; i<3; i++)
primaryColor[i].style.display = 'none';
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
‘प्राथमिक रंग छुपाएं’ clicking क्लिक करने से पहले बटन -
‘प्राथमिक रंग छुपाएं’ . क्लिक करने के बाद बटन -
उदाहरण
आइए छिपे हुए CSS विजिबिलिटी का एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
‘प्राथमिक रंग छुपाएं’ clicking क्लिक करने से पहले बटन -
‘प्राथमिक रंग छुपाएं’ . क्लिक करने के बाद बटन -
