سبد (0)

تغییر ظاهر عناصر HTML

مدل DOM به JavaScript اجازه می دهد تا سبک نمایش (Style) عناصر HTML را تغییر دهد.


تغییر سبک نمایش (Style) عناصر HTML

Wiki

نحوه استفاده:

document.getElementById(id).style.property=new style

در مثال زیر، رنگ متن عنصر با شناسه "p2"، تغییر داده شده است:

مثال (تغییر ظاهر عناصر HTML)

<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>
خودتان امتحان کنید »

در مثال زیر، زمانی که کاربر روی دکمه کلیک کند، رنگ متن عنصر با شناسه "id1"، تغییر داده شده است:

مثال (تغییر ظاهر عناصر HTML)

<!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>
خودتان امتحان کنید »

مثال های بیشتر

Visibility
این مثال نشان می دهد که چگونه یک عنصر را قابل رویت یا پنهان کنیم.

آموزش صوتی JavaScript

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه