با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
در ایم جلسه قصد داریم به آموزش تغییر CSS در جاوا اسکریپت JavaScript و تغییر استایل HTML در جاوا اسکریپت بپردازیم.
HTML DOM این امکان را به جاوا اسکریپت می دهد تا استایل عناصر HTML را تغییر دهد.
برای تغییر استایل HTML از ساختار دستور زیر استفاده می کنیم:
1 | document.getElementById(id).style.property = new style |
مثال زیر استابل عنصر <p> را تغییر می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <body> <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color = "blue"; </script> <p>The paragraph above was changed by a script.</p> </body> </html> |
HTML DOM این امکان را به ما می دهد تا هنگامی که رویدادی رخ داد، کدی را اجرا کنیم.
رویداد ها وقتی “چیز هایی” برای عناصر HTML رخ دهد توسط مرورگر تولید می شوند:
در مثال زیر هنگامی که کاربر روی دکمه کلیک می کند، استایل عنصر HTML با “id=”id1 تغییر می کند:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color = 'red'"> Click Me!</button> </body> </html> |
همچنین کد بالا را می توانیم مانند مثال زیر بنویسیم:
1 2 3 4 5 | document.getElementById("id1").onclick = change ; function change() { document.getElementById('id1').style.color = 'red'; } |
جلسه تغییرات CSS در جاوا اسکریپت نیز به پایان رسید.
در جلسه بعد به آموزش گره ها در DOM خواهیم پرداخت. با ما همراه باشید.
امیرحسام
اگر بخواهم backgroundimage را با چند دکمه عوض کنم باید چجوری بنویسم؟
امیرحسام
مشکلم با button ها حل شد
پی وی لرن
اوکی بسیار خوب
رضا
بعد تغییر رنگ اگر بخواهیم با کلیک دوباره به رنگ اولیه برگرده باید چه کدی بنویسیم
پی وی لرن
می توانید رنگ را درون یک متغییر ذخیره و سپس از آن استفاده نمایید.
سبحان
اگر بخوام در جاوا اسکریپت مثلا بگم باید دستور alert رو وسط صفحه اجرا کنی چه کدی باید بنویسم.
ممنون.
مهرداد
سلام وقت بخير
کد زير کار نمي کند و خطا ميدهد؟
document.getElementById(“id1”).onclick = change ;
function change()
{
document.getElementById(‘id1’).style.color = ‘red’;
}
document.getElementById(“id1”).onclick = change ;
function change()
{
document.getElementById(‘id1’).style.color = ‘red’;
}
Cannot set properties of null (setting ‘onclick’) این خطا
چه باید کرد؟