نحوه تغییر استایل های css توسط جاوا اسکریپت

نحوه تغییر استایل های css توسط جاوا اسکریپت

توسط دستورات جاوا اسکریپت یا جی کوئری هم شما میتونید استایل های css رو تغییر بدید. این کار به شما کمک می کنه تا به صورت داینامیک تری بتونید از استایل ها استفاده کنید.

تغییر استایل های css توسط دستور Style در جاوا اسکریپت

یکی از دستوراتی که توسط اون میتونید استایل های Css رو در جاوا اسکریپت تغییر بدید Style می باشد. برای درک بهتر این دستور به مثال زیر توجه کنید.

<div style='background-color:green;' id='mydiv'>
    موجود
</div>
<button id='btnPurch'>خرید</button>

<script>
    document.getElementById('btnPurch').onclick = function(){
        document.getElementById('mydiv').Style.width = 600px;
        document.getElementById('mydiv').Style.backgroundColor = yellow;
        document.getElementById('mydiv').Style.color = red;
    }
</script>

همونطوری که در مثال بالا می بینید توسط دستور getElementById مشخص می کنیم که وقتی روی دکمه btnPurch کلیک شد دستورات درون رویداد onclick رو اجرا کنه. و در داخل بلوک onclick هم به راحتی استایل های css رو تغییر دادیم.

تغییر استایل های css توسط دستور attr در جی کوئری

اگر شما از دستورات جی کوئری در پروژه استفاده میکنید میتونید از متد attr هم برای تغییر استایل ها استفاده کنید. برای آشنایی با این دستور به مثال زیر توجه کنید.

$("button").click(function(){
   $("#img1").attr("width","500");
   $("#img1").attr("border-raduis","4px");
});

در مثال بالا بعد از کلیک کردن روی دکمه button خاصیت های width و border-radius رو تغییر دادیم.

jQuery attr method