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

پاسخ هوش مصنوعی

برای تغییر استایل های CSS با استفاده از جاوا اسکریپت، شما می توانید از ویژگی `style` در اشیاء DOM استفاده کنید. به عنوان مثال، اگر می خواهید رنگ یک div را تغییر دهید، می توانید یک تابع جاوا اسکریپت بنویسید که به رویداد کلیک دکمه پاسخ دهد و سپس استایل آن div را تغییر دهد. در زیر یک مثال ساده آورده شده است:

html



    
    
    


    

    تغییر رنگ

    

در این مثال:

• یک div با شناسه myDiv وجود دارد که رنگ پس زمینه اولیه آن آبی است.
• یک دکمه با شناسه myButton تعریف شده است.
• هنگامی که بر روی دکمه کلیک می شود، رنگ پس زمینه div به قرمز تغییر می کند.

شما می توانید استایل های دیگری مانند عرض، ارتفاع، حاشیه و غیره را نیز به همین صورت تغییر دهید.

نحوه تغییر استایل های 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