نمایش استایل جاوااسکریپت
دسته بندی : آموزش Javascript سطح مقاله : متوسط زمان مطالعه : 4 دقیقه آخرین بروز رسانی: 25 اسفند 1399در این مقاله با معرفی نمایش استایل جاوااسکریپت همراه ما باشید.
نکات اصلی نمایش استایل جاوااسکریپت:
- ویژگی نمایش استایل جاوااسکریپت برای تنظیم یا بازگشت نوع نمایش یک عنصر مشخص استفاده می شود.
- در صورت مواجهه با یک عنصر بلوک ، می توانید از ویژگی float برای تغییر نوع نمایش آن نیز استفاده کنید.
توضیح نمایش استایل جاوااسکریپت
ویژگی JavaScript style display برای تنظیم و برگرداندن نوع نمایش یک عنصر مشخص است.
اکثر عناصر HTML دارای انواع نمایش داخلی یا مسدود هستند. محتوایی که عناصر درون ریز دارد از طرف چپ و راست آنها شناور است. عناصر بلوک متفاوت هستند زیرا محتوا را در کنار خود نشان نمی دهند: آنها کل خط را پر می کنند. بعلاوه ، از ویژگی نمایش سبک جاوا اسکریپت می توان برای تکمیل عنصر پنهان جاوا اسکریپت (و همچنین نمایش عنصر) استفاده کرد.
می توانید متوجه شوید که با ویژگی visibility می توان عملکرد مشابهی را بدست آورد. با این حال ، آنها تفاوت های خود را دارند: وقتی ویژگی نمایش روی هیچ تنظیم شود ، کل عنصر را پنهان می کند (دیگر جایی نخواهد داشت) وقتی ویژگی visibility به حالت مخفی تنظیم شود ، این عنصر در جای مناسب خود نمایش داده می شود (فقط محتوای آن پنهان می شود).
البته در اینجا هیچ طرفی انتخاب نمی شود. موقعیت های مختلفی وجود دارد و اگرچه ممکن است یک خاصیت در یک مورد بهترین به نظر برسد ، اما ویژگی دیگر در مورد دیگر مفیدتر خواهد بود.
مثال زیر نشان می دهد که چگونه ویژگی نمایش سبک JavaScript می تواند عنصری را نامرئی کند:
document.getElementById("sampleDiv").style.display = "none";
نحو مناسب
اگر نیاز به یافتن نوع نمایشگر برای یک شی خاص دارید ، می توانید برای بازگرداندن ویژگی نمایش ، مثال زیر را دنبال کنید:
object.style.display
اگر می خواهید ویژگی نمایش را خود تنظیم کنید ، باید از این مثال برای مرجع استفاده کنید:
object.style.display = مقدار
برای استفاده حداکثر از ویژگی نمایش سبک جاوا اسکریپت ، باید تمام مقادیر ممکن را یاد بگیرید. انواع مختلفی از آنها وجود دارد ، متناسب با شرایط مختلف. ما قبلاً درباره ی none استفاده کردیم که برای پنهان کردن عناصر استفاده می شود. جدول زیر مقادیر مختلف دیگر برای استفاده را به طور خلاصه مرور می کند:
Description | Value |
ارائه به عنوان عنصر سطح بلوک. | block |
ارائه به عنوان عنصر درون خطی یا سطح بلوک. بستگی به زمینه دارد. | compact |
به عنوان جعبه فلکس در سطح بلوک ارائه می شود. جدید با CSS3. | flex |
مقدار ویژگی نمایش از عنصر والد به ارث می رسد. | inherit |
به عنوان عنصر درون خطی ارائه می شود. پیش فرض | inline |
به عنوان جعبه بلوک در داخل جعبه inline ارائه می شود. | inline-block |
به عنوان جعبه فلکس درون خطی ارائه می شود. جدید با CSS3. | inline-flex |
بدون شکسته شدن خط قبل یا بعد از جدول ، به صورت جدول درون خطی (مانند <جدول>) ارائه می شود. | inline-table |
به صورت لیست ارائه می شود. | list-item |
محتوا قبل یا بعد از جعبه برای نشانگر تنظیم شده است (می تواند همراه با: قبل و بعد از عناصر شبه استفاده شود. در غیر این صورت یکسان با درون خط است). | marker |
عنصر به هیچ وجه نمایش داده نمی شود (اما در DOM باقی می ماند). | none |
به عنوان عنصر سطح بلوک یا درون خطی ارائه می شود. بستگی به زمینه دارد. | run-in |
با شکسته شدن جدول قبل و بعد از جدول ، به صورت جدول بلوک (مشابه <جدول>) ارائه می شود | table |
به عنوان زیرنویس جدول ارائه می شود (شبیه ). | table-caption |
به صورت سلول جدول ارائه می شود (similar to <caption>) | table-cell |
به صورت ستونی از سلول ارائه می شود (مشابه ). | table-column |
رندرها به صورت گروهی از یک یا چند ستون (مشابه ) است. | table‑column‑group |
به صورت ردیف پاورقی جدول ارائه می شود (شبیه ). | table-footer-group |
رندر به عنوان ردیف هدر جدول (مشابه ). | table-header-group |
به صورت ردیف جدول ارائه می شود (مشابه ). | table-row |
رندرها به صورت گروهی از یک یا چند ردیف (مشابه ) است. | table-row-group |
ویژگی را به طور پیش فرض تنظیم کنید. | initial |
به ارث بردن اموال از والدین خود بپردازید. | inherit |
مقدار بازگشتی
به عنوان بیشتر توابع جاوا اسکریپت ، روشی که برای نمایش سبک استفاده می شود نیز دارای مقدار بازگشت است. این نوع نمایش یک عنصر خاص را نشان می دهد.
اکنون با انواع نمایشگر آشنا شده اید. بنابراین ، برای شما آسان خواهد بود که مقدار بازگشتی را که هنگام امتحان کردن عملکرد بدست می آورید ، شناسایی کنید. به خاطر داشته باشید که به طور پیش فرض ویژگی نمایش سبک JavaScript به صورت درون خطی تنظیم می شود.
inline | :Default Value |
رشته ای ، که نوع نمایش یک عنصر مشخص را نشان می دهد | :Return Value |
CSS1 | CSS Version |
مثالهای کد مفید
برای آسان تر کردن روند یادگیری نمایش سبک جاوا اسکریپت ، ما باید چند نمونه کد را به شما معرفی کنیم که نشان می دهد مقادیر مختلف چگونه کار می کنند.
در مثال زیر نحوه نوشتن مقدار none در مقایسه با ویژگی visibility (که روی حالت مخفی تنظیم شده است) آورده شده است:
function sampleDisplay() {
document.getElementById("samplePara1").style.display = "none";
}
function sampleVisibility() {
document.getElementById("samplePara2").style.visibility = "hidden";
}
اکنون ، این مثال بعدی نحوه جابجایی بین نمایش و پنهان کردن عناصر را نشان می دهد:
function displayFunction() {
var sampleDiv = document.getElementById('sampleDiv');
if (sampleDiv.style.display === 'none') {
sampleDiv.style.display = 'block';
}
else {
sampleDiv.style.display = 'none';
}
کد زیر نشان می دهد که سه مقدار خاص از یکدیگر متفاوت هستند ، به طور خاص درون خطی ، بلوک و هیچ کدام:
function displayFunction(sampleDiv) {
var selectedWhich = sampleDiv.selectedIndex;
var sel = sampleDiv.options[selectedWhich].text;
var elem = document.getElementById("sampleSpan");
elem.style.display = sel;
}
با مثال زیر می توان نوع نمایش <p>
را بازیابی کرد:
alert(document.getElementById("samplePara").style.display);
این مقاله چقدر براتون مفید بود؟