آموزش طراحی سایت (HTML CSS Javascript) | آتریا

خصوصیت element.style

مثال (خصوصیت element.style)

اضافه کردن یک رنگ به یک عنصر <h1>:

document.getElementById("myH1").style.color = "red";

قبل از ست کردن استایل مورد نظر:

Hello World!

بعد از ست کردن استایل مورد نظر:

Hello World!

خودتان امتحان کنید »

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

خصوصیت style یک شیء css style Declaration را برمی گرداند که، خصوصیت style یک عنصر را مشخص می کند.

از خصوصیت style برای به دست آوردن یا ست کردن یک استایل خاص به یک عنصر استفاده می شود (با استفاده از خصوصیت های css متفاوت).

نکته: این امکان پذیر نیست که با نسبت دادن یک رشته به خصوصیت style ، استایل های مورد نظر خود را مانند این مثال ست کنیم: "element.style="color:red . برای ست کردن استایل های یک عنصر، یک خصوصیت سی اس اس را به style اضافه کنید و سپس مقدار را مانند زیر به آن نسبت دهید:

element.style.backgroundColor = "red"; // set the background color of an element to redامتحان کنید

همان طور که مشاهده می کنید، نحوه ی ست کردن دستورات سی اس اس در نحو جاوااسکریپت، کمی متفاوت تر از خود سی اس اس می باشد(بعنوان مثال به جای background-color از عبارت backgroundColor استفاده می شود).

برای دیدن یک لیست از تمام خصوصیت های قابل استفاده، می توانید Style Object Reference را مطالعه نمایید.

نکته: خصوصیت style تنها تعریف های سی اس اس را به صورت استایل های درون خطی، ست می کند، بعنوان مثال : <p style="color:red;">

این امکان ندارد که از این خصوصیت برای به دست آوردن اطلاعات درباره ی دستورات استایل از قسمت <head> در سند یا دیگر برگه های استایل(style sheet) استفاده کنید.

اما می توانید با استفاده از دستور document.getElementByTagName به عنصر style مورد نظر دسترسی پیدا کنید:

var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element امتحان کنید

نکته: توصیه می شود که به جای متد element.setAttribute("style", "...") از خصوصیت style استفاده کنید، زیرا خصوصیت style دیگر خصوصیات css را که ممکن است در خصوصیتstyle مشخص شده باشند را رونویسی نمی کند.

پشتیبانی مرورگرها

متد
style	بله	بله	بله	بله	بله

نحوه استفاده

برگرداندن خصوصیت style:

element.style.property

ست کردن خصوصیت های style:

element.style.property=value

Property Values

مقدار	توضیحات
value	مقدار خصوصیت مشخص شده را معلوم می کند. بعنوان مثال برای خصوصیت borderBottom: element.style.borderBottom = "2px solid red";

مقدار

توضیحات

value

مقدار خصوصیت مشخص شده را معلوم می کند. بعنوان مثال برای خصوصیت borderBottom:

element.style.borderBottom = "2px solid red";

جزئیات تکنیکی

مقدار برگشتی	یک تعریف سی اس اس که مشخص کننده ی یک خصوصیت استایل از یک عنصر می باشد.
DOM Version	Dom Level 2 CSS

مثال - خودتان امتحان کنید

مثال (خصوصیت element.style)

به دست آوردن مقدار border-top از یک عنصر <p>:

var x = document.getElementById("myP").style.borderTop;

خروجی x در کد بالا

5px solid red

خودتان امتحان کنید »

آموزش های مرتبط

CSS Tutorial: CSS Tutorial

CSS Reference: CSS Properties

HTML DOM Reference: Style Object Reference

HTML Reference: HTML <style> tag

HTMLکلیه توابع و خصوصیت های شیء Element در JavaScript Reference کلیه توابع و خصوصیت های شیء Element در JavaScript

: نوشته شده توسط احسان عباسی; بازدید: 6173

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی