CSS ডিসপ্লে None ডেভেলপারকে ডিসপ্লে প্রোপার্টি নোনে সেট করে উপাদান লুকাতে সাহায্য করে। যে উপাদানটির ডিসপ্লে কোনোটিতেই সেট করা নেই তার জন্য কোনো বাক্স তৈরি করা হয় না এবং এমনকি এর চাইল্ড এলিমেন্টও যার ডিসপ্লেতে কোনোটি ছাড়া অন্য কোনো মান সেট করা থাকতে পারে।
সিনট্যাক্স
নিচে CSS ডিসপ্লে None-
-এর সিনট্যাক্স দেওয়া হলSelector {
display: none;
} উদাহরণ
চলুন 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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে'প্রাথমিক রং লুকান' ক্লিক করার আগে৷ বোতাম -
'প্রাথমিক রং লুকান' ক্লিক করার পর বোতাম -
উদাহরণ
CSS Display None-
এর আরেকটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<style>
#flex {
display: flex;
}
#none {
display: none;
}
.inline-block {
display: inline-block;
background-color: mintcream;
}
.grid {
display: grid;
background-color: orange;
}
div {
margin: 50px;
padding: 10px;
height: 10px;
line-height: 5px;
text-align: center;
background-color: red;
border: 2px solid blue;
}
div > div {
background-color: yellow;
border: 2px solid green;
}
div > div > div {
background-color: sandybrown;
border: 4px solid darkred;
}
</style>
</head>
<body>
<div><span id="flex">AAAAAA</span>
<div><span id="none">BBBBBB</span>
<div>
<span class="inline-block">CCCCC</span>
<span class="inline-block">DDDDD</span>
<div>
<span class="grid">EEEE FFFF</span>
<span class="grid">GGGG HHHH</span>
</div>
</div>
</div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
