با استفاده از display اموال
را display ویژگی تعیین می کند که آیا یک عنصر در صفحه نمایش داده می شود یا خیر. وقتی روی none، عنصر از جریان سند حذف می شود و فضایی را اشغال نمی کند.
مثال
HTML
lang="en">
charset="UTF-8">
id="box">Box Content
const dropdown = document.getElementById('select');
const box = document.getElementById('box');
dropdown.addEventListener('change', function (event) {
if (event.target.value === 'show') {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
});
توضیح:
- در ابتدا،
divعنصر باid="box"خود را داردdisplayویژگی تنظیم شده بهnone. - را
changeرویداد شنونده مقدار انتخاب شده از منوی کشویی را بررسی می کند. - اگر مقدار باشد
show،div'sdisplayدارایی تنظیم شده استblock، آن را قابل مشاهده می کند. - اگر مقدار باشد
hide،divدوباره پنهان شده است
با استفاده از visibility اموال
را visibility ویژگی مشخص می کند که یک عنصر قابل مشاهده یا پنهان است، اما در جریان سند باقی می ماند و همچنان فضا را اشغال می کند.
مثال
HTML
lang="en">
charset="UTF-8">
id="box">Box Content
const dropdown = document.getElementById('select');
const box = document.getElementById('box');
dropdown.addEventListener('change', function (event) {
if (event.target.value === 'show') {
box.style.visibility = 'visible';
} else {
box.style.visibility = 'hidden';
}
});
توضیح:
- در ابتدا،
divعنصر باid="box"خود را داردvisibilityویژگی تنظیم شده بهhidden. - را
changeرویداد شنونده مقدار انتخاب شده از منوی کشویی را بررسی می کند. - اگر مقدار باشد
show،div'svisibilityدارایی تنظیم شده استvisible. - اگر مقدار باشد
hide،divنامرئی می شود اما همچنان فضایی را در طرح اشغال می کند.
تفاوت های کلیدی بین display و visibility
| اموال | اثر وقتی پنهان است | بر روی چیدمان تاثیر می گذارد |
|---|---|---|
display |
عنصر حذف می شود | بله |
visibility |
عنصر نامرئی است | خیر |
نتیجه گیری
انتخاب بین display و visibility بستگی به مورد استفاده خاص شما دارد:
- استفاده کنید
displayزمانی که می خواهید عنصر به طور کامل از جریان سند حذف شود. - استفاده کنید
visibilityزمانی که می خواهید عنصر در طرح باقی بماند اما قابل مشاهده نباشد.
پیاده سازی هر دو روش آسان است و راهی تمیز برای نمایش یا پنهان کردن عناصر به صورت پویا با استفاده از جاوا اسکریپت ارائه می دهد. با هر دو روش آزمایش کنید تا ببینید کدامیک به بهترین وجه با نیازهای شما مطابقت دارد.
