نمایش استایل جاوااسکریپت

دسته بندی : آموزش 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);

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 2