HTML DOM স্টাইল ডিসপ্লে প্রপার্টি ব্যবহার করা হয় কোনো এলিমেন্টের ডিসপ্লে টাইপ সেট বা রিটার্ন করার জন্য। উপাদানগুলি বেশিরভাগই ব্লক বা ইনলাইন। আপনি ডিসপ্লে ব্যবহার করে উপাদানটি লুকাতে পারেন:কোনটিই নয়৷
৷−
-এর সিনট্যাক্স নিচে দেওয়া হলপ্রদর্শন বৈশিষ্ট্য সেট করা হচ্ছে -
object.style.display = value
উপরের সম্পত্তির মান নিম্নরূপ ব্যাখ্যা করা হয়েছে −
| মান | বর্ণনা | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ইনলাইন৷ | উপাদানটিকে ইনলাইন উপাদান হিসাবে প্রদর্শন করা যেমন প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি কোন প্রভাব ফেলবে না৷ | |||||||||||||||||||||||
| ব্লক করুন৷ | ব্লক উপাদানটি নতুন লাইনে প্রদর্শিত হয় এবং পুরো প্রস্থ নেয়৷ | |||||||||||||||||||||||
| সামগ্রী | এটি শুধুমাত্র শিশু উপাদানগুলি প্রদর্শন করে এবং শিশুকে সরাসরি DOM-এর সন্তান তৈরি করে অভিভাবক উপাদানগুলিকে অদৃশ্য করে দেয়৷ | |||||||||||||||||||||||
| ফ্লেক্স৷ | একটি ব্লক-স্তরের ফ্লেক্স কন্টেইনার হিসাবে উপাদান প্রদর্শন করুন | |||||||||||||||||||||||
| গ্রিড৷ | একটি ব্লক-স্তরের গ্রিড কন্টেইনার হিসাবে উপাদান প্রদর্শন করুন | |||||||||||||||||||||||
| ইনলাইন-ব্লক৷ | Sameas ইনলাইন কিন্তু এখন আপনি প্রস্থ এবং উচ্চতার মান প্রয়োগ করতে পারেন৷ | |||||||||||||||||||||||
| ইনলাইন-ফ্লেক্স৷ | ইনলাইন-লেভেল ফ্লেক্স কন্টেইনার হিসাবে উপাদান প্রদর্শন করুন | |||||||||||||||||||||||
| ইনলাইন-গ্রিড৷ | ইনলাইন-লেভেল গ্রিড কন্টেইনার হিসাবে উপাদান প্রদর্শন করুন | |||||||||||||||||||||||
| ইনলাইন-টেবিল | এলিমেন্ট একটি ইনলাইন-লেভেল টেবিল হিসাবে প্রদর্শিত হয়৷ | |||||||||||||||||||||||
| তালিকা-আইটেম | এলিমেন্টকে | |||||||||||||||||||||||
| রান-ইন৷ | প্রসঙ্গের উপর নির্ভর করে ব্লক বা ইনলাইন হিসাবে উপাদান প্রদর্শন করুন | |||||||||||||||||||||||
| সারণী | এলিমেন্টকে
ডিসপ্লে প্রপার্টি - -এর জন্য একটি উদাহরণ দেখা যাকউদাহরণ<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
padding:10px;
background-color:lightblue;
display:flex;
flex-direction:right;
}
#flexSpan{
width:70px;
background-color:red;
margin:20px;
padding:10px;
}
</style>
<script>
function changeDisplay() {
document.getElementById("DIV1").style.display = "block";
document.getElementById("flexSpan").style.display = "block";
document.getElementById("Sample").innerHTML="The display is now changed to block for both the div and its inner Span elements";
}
</script>
</head>
<body>
<div id="DIV1">
<span id="flexSpan">WORLD1</span>
<span id="flexSpan">WORLD2</span>
</div>
<p>Change the display property of the above div and its inner elements by clicking the below button</p>
<button onclick="changeDisplay()">Change Display</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
“পরিবর্তন প্রদর্শন-এ ক্লিক করলে ” -
|
