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> আউটপুট
“পরিবর্তন প্রদর্শন-এ ক্লিক করলে ” -
|
