سبد (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
این مثال نشان می دهد که چگونه یک عنصر را قابل رویت یا پنهان کنیم.

دیدگاه‌ها  

+3 # mehdi ghasemi 1394-12-11 11:30
با سلام خدمت شما و تشکر بابت مطلب ارزشمندتان

در اخر همین صفحه یک مثال با عنوان "Visibility" زده شده که با یک کلیک متنی نمایش داده میشود و با کلیک دیگر متن پنهان می شود. سوال من اینه که من فقط یک کلیک داشته باشم که وقتی روی آن کلیک میکنم متن نمایش داده بشه و در صورتی که هر جای صفحه(بجز خود کلیک آن) کلیک کردم متن پنهان شود. من راه های مختلفی امتحان و به نتیجه نرسیدم. ممنون میشم که را راهنمایی کنید

تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-12-12 13:17
با سلام و تشکر
دوست عزیز سوالتون واضح نیست... برای این کار باید وقتی که کلیک میکنید، یه تریگر فعال کنید که با کلیک در هر جایی غیر از اون ناحیه، اون تریگر فعال بشه.
البته منظورتون رو بیشتر توضیح بدید، تا دقیق بشه راهنمایی کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # azadeh ahmadi 1394-08-13 16:46
سلام و خسته نباشید..ممنون که وقت میذارین و به همه ی سوالات جواب میدید...
یه ide خوب بجز دریم ویور برای کار با html , css, javascript چی هست!؟
دریم یه جاهایی گذینه های آماده رو نشون نمیده..مثلا برای همین ویزیبیلیتی...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-13 19:15
با سلام و تشکر.
یکی از بهترین IDEها که خود من هم ازش استفاده می‌کنم، NetBeans هست که امکانات فوق‌العاده‌ای داره و تقریبا از خیلی از زبان‌ها پشتیبانی می‌کنه.
این نرم‌افزار رایگان هست، ولی چون ایران تحریم هست، باید از طریق VPN اقدام به دانلود این نرم‌افزار کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # amin 1394-07-24 18:13
با سلام
function buttom4() {
document.getEle mentById("butto m1").style.back ground-color = "#eee8aa";
}
چرا این کد اجرا نمیشه اما اگر color باشه اجرا میشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-24 20:55
با سلام.
به خاطر وجود کاراکتر dash (-) در عبارت background-colo r هست. نام نباید از کاراکترهای خاص تشکیل شده باشه و اینجا چون از کاراکتر - استفاده شده، بنابراین کد اجرا نمیشه.

برای حل این مشکل می‌تونید از کد زیر استفاده کنید:
document.getElementById("buttom1").setAttribute("style", "background-colo r:#eee8aa")
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # majid 1394-05-11 00:30
با سلام و تشکر بابت سایت عالیتون.یه سوال راجع به مثال اول دارم همه دستورات css رو نمیشه تو یه خط نوشت؟
color font family va size
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-07-24 20:57
با سلام.
بله در یک خط میشه چند تا دستور CSS نوشت.
مثل کد زیر:

document.getElementById("butto m1").style = "color:#e89;fon t-family:tahoma ;size:11px;";
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیرکیان 1393-12-16 13:29
فکر کنم فقط می شود خواص خود عناصر html عوض کرد نه خواصی که با css به آن عنصر نسبت میدهیم.؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # مظاهر نصوحی 1393-12-16 13:50
این طور نیست. در مثال های درس visibility را تغییر داده ایم. مثال خودتان امتحان کنید زیر را ملاحظه بفرمایید:
http://beyamooz.com/try_it_yourself/tryit.php?filename=trydhtml_visibility
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیرکیان 1393-12-18 10:48
پس می شود این طور تعریف کرد که تمام کارهایی که با css میتوانستیم انجام دهیم با جاوااسکریپت هم می توانیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # امیر پهلوان صادق 1393-12-18 14:09
بله دقیقاً ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

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

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

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