انیمه
خدمت سربازی
حیوانات خانگی
بازی
فیلم و سریال
موبایل و تبلت
خودرو
برنامه نویسی
نرم افزار
زبان انگلیسی
گرافیک
سخت افزار
گل و گیاه
ارز دیجیتال
کتاب و مجله
گردشگری
ورزش
2
ماجراجوبه دست آوردن مقدار Css با استفاده از جاوا اسکریپت
وقتی به یک المان یک استایل داده شده است و می خواهیم با جاوااسکریپت مقدار آن را بخوانیم از روش زیر می توانیم استفاده کنیم :
<div id="container" style="color:red">
Content
</div>
<script>
alert(container.style.color); // => red
</script>
ولی در صورتی که به جای style از طریق class، رنگ تعریف شده باشد، نتیجه عبارت container.style.color خالی می شود. یعنی:
<style>
.red
{
color:red
}
</style>
<div id="container" class="red">
Content
</div>
<script>
alert(container.style.color); // => خالی
</script>
برای اینکه در این شرایط هم نتیجه درست نمایش داده شود، چه راه حلی وجود داره؟
پاسخ به سوال
1127بازدید
پاسخ ها (1)
2
Tavana برای اینکار می توانید از متد getComputedStyle استفاده کنید.
var computedStyle = getComputedStyle(container);
alert( computedStyle.color ); // => rgb(255, 0, 0)
این متد مقادیری که به صورت نسبت بیان شده اند مانند font-size:150% یا font-size:2em و ... را معمولا بعد از تبدیل، به صورت px نمایش می دهد.
حتما در صورت نیاز به مقادیری مانند padding و margin از مقادیری مانند paddingLeft ، marginTop و... استفاده کنید و از padding ، margin و.. تنها استفاده نکنید. با وجود اینکه بعضی از مرورگرها این مقادیر را هم نشان می دهند ولی این یک استاندارد نیست.
پاسخ به سوال