سلام دوستان . میخوام بعضی از استایل هایی که توی صفحه Html خودم دارم رو در برخی از شرایط تغییر بدم. به عنوان مثال یک دکمه دارم که وقتی روش کلیک میشه میخوام رنگ یک div تغییر کنه. لطفا راهنمایی کنید نحوه تغییر استایل های css توسط جاوا اسکریپت به چه صورتی انجام میشه ؟
توسط دستورات جاوا اسکریپت یا جی کوئری هم شما میتونید استایل های css رو تغییر بدید. این کار به شما کمک می کنه تا به صورت داینامیک تری بتونید از استایل ها استفاده کنید.
یکی از دستوراتی که توسط اون میتونید استایل های 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 رو تغییر دادیم.
اگر شما از دستورات جی کوئری در پروژه استفاده میکنید میتونید از متد attr هم برای تغییر استایل ها استفاده کنید. برای آشنایی با این دستور به مثال زیر توجه کنید.
$("button").click(function(){
$("#img1").attr("width","500");
$("#img1").attr("border-raduis","4px");
});
در مثال بالا بعد از کلیک کردن روی دکمه button خاصیت های width و border-radius رو تغییر دادیم.
تاریخ :
1403/08/18
- ساعت :
10:40:00 AM
- بازدید :
97
- پاسخ :
0
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
930
- پاسخ :
1
|
تاریخ :
1403/07/27
- ساعت :
03:21:00 PM
- بازدید :
205
- پاسخ :
1
|
تاریخ :
1403/07/09
- ساعت :
07:25:00 PM
- بازدید :
266
- پاسخ :
0
|
تاریخ :
1403/05/20
- ساعت :
09:18:00 PM
- بازدید :
444
- پاسخ :
0
|
تاریخ :
1398/09/21
- ساعت :
09:53:00 AM
- بازدید :
5943
- پاسخ :
7
|
تاریخ :
1399/06/16
- ساعت :
07:18:00 PM
- بازدید :
7861
- پاسخ :
4
|
تاریخ :
1400/11/14
- ساعت :
12:23:00 AM
- بازدید :
2579
- پاسخ :
2
|
تاریخ :
1402/01/26
- ساعت :
03:38:00 PM
- بازدید :
1244
- پاسخ :
1
|
تاریخ :
1398/08/09
- ساعت :
10:17:00 PM
- بازدید :
4615
- پاسخ :
1
|
تاریخ :
1403/08/29
- ساعت :
07:15:00 PM
- بازدید :
57
- پاسخ :
0
|
تاریخ :
1403/08/18
- ساعت :
10:40:00 AM
- بازدید :
97
- پاسخ :
0
|
تاریخ :
1402/07/23
- ساعت :
04:01:00 PM
- بازدید :
1031
- پاسخ :
1
|
تاریخ :
1403/05/30
- ساعت :
09:22:00 AM
- بازدید :
426
- پاسخ :
1
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
930
- پاسخ :
1
|
تاریخ :
1402/08/16
- ساعت :
10:38:00 AM
- بازدید :
1348
- پاسخ :
1
|
تاریخ :
1398/08/17
- ساعت :
01:27:00 AM
- بازدید :
4796
- پاسخ :
1
|
تاریخ :
1402/09/08
- ساعت :
07:34:00 PM
- بازدید :
1157
- پاسخ :
1
|
تاریخ :
1402/09/21
- ساعت :
11:10:00 PM
- بازدید :
595
- پاسخ :
1
|
تاریخ :
1403/07/27
- ساعت :
03:21:00 PM
- بازدید :
205
- پاسخ :
1
|