CSS প্রদর্শন এবং দৃশ্যমানতার মধ্যে পার্থক্য

আমরা যথাক্রমে CSS দৃশ্যমানতা এবং CSS প্রদর্শন বৈশিষ্ট্য সহ একটি HTML নথিতে একটি উপাদান লুকাতে বা সরাতে পারি। ব্যবহারকারীর কাছে, দুটি বৈশিষ্ট্যের যে কোনো একটি ব্যবহারে কোনো পার্থক্য মনে হতে পারে না, তবে আছে।

CSS প্রদর্শন − কোনটিই নথিতে উপাদানটিকে রেন্ডার করে না এবং এইভাবে এটিকে কোনো স্থান বরাদ্দ করে না৷

CSS দৃশ্যমানতা − লুকানো নথিতে উপাদানটিকে রেন্ডার করে এবং এমনকি স্থান বরাদ্দ করা হয় কিন্তু এটি ব্যবহারকারীর কাছে দৃশ্যমান হয় না৷

উদাহরণ

CSS Display none -

এর একটি উদাহরণ দেখা যাক

<!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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

'প্রাথমিক রং লুকান' ক্লিক করার আগে৷ বোতাম -

CSS প্রদর্শন এবং দৃশ্যমানতার মধ্যে পার্থক্য

'প্রাথমিক রং লুকান' ক্লিক করার পর বোতাম -

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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

'প্রাথমিক রং লুকান' ক্লিক করার আগে৷ বোতাম -

CSS প্রদর্শন এবং দৃশ্যমানতার মধ্যে পার্থক্য

'প্রাথমিক রং লুকান' ক্লিক করার পর বোতাম -

CSS প্রদর্শন এবং দৃশ্যমানতার মধ্যে পার্থক্য