تغییر ظاهر عناصر HTML
مدل DOM به JavaScript اجازه می دهد تا سبک نمایش (Style) عناصر HTML را تغییر دهد.
تغییر سبک نمایش (Style) عناصر HTML
نحوه استفاده:
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>
خودتان امتحان کنید »<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>
خودتان امتحان کنید »<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
این مثال نشان می دهد که چگونه یک عنصر را قابل رویت یا پنهان کنیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 23487
دیدگاه‌ها
سلام خدمت دوستان عزیز می خواستم بدونم آیا متد یا تابعی در جاوا اسکریپت هست که بشه با اون استایل وب سایت رو در طول روز به صورت اتوماتیک تغییر داد؟
سلام، در مثال زیر، رنگ پس زمینه بر اساس اینکه در چه ساعتی از روز هستیم تنظیم می شود:
codepen.io/jamesbarnett/pen/kdDBL
همچنین می تونید در گوگل واژه "change css based on time of day" را جستجو کنید.
با سلام خدمت شما و تشکر بابت مطلب ارزشمندتان
در اخر همین صفحه یک مثال با عنوان "Visibility" زده شده که با یک کلیک متنی نمایش داده میشود و با کلیک دیگر متن پنهان می شود. سوال من اینه که من فقط یک کلیک داشته باشم که وقتی روی آن کلیک میکنم متن نمایش داده بشه و در صورتی که هر جای صفحه(بجز خود کلیک آن) کلیک کردم متن پنهان شود. من راه های مختلفی امتحان و به نتیجه نرسیدم. ممنون میشم که را راهنمایی کنید
تشکر
با سلام و تشکر
دوست عزیز سوالتون واضح نیست... برای این کار باید وقتی که کلیک میکنید، یه تریگر فعال کنید که با کلیک در هر جایی غیر از اون ناحیه، اون تریگر فعال بشه.
البته منظورتون رو بیشتر توضیح بدید، تا دقیق بشه راهنمایی کرد.
سلام و خسته نباشید..ممنون که وقت میذارین و به همه ی سوالات جواب میدید...
یه ide خوب بجز دریم ویور برای کار با html , css, javascript چی هست!؟
دریم یه جاهایی گذینه های آماده رو نشون نمیده..مثلا برای همین ویزیبیلیتی...
با سلام و تشکر.
یکی از بهترین IDEها که خود من هم ازش استفاده میکنم، NetBeans هست که امکانات فوق‌العاده‌ای داره و تقریبا از خیلی از زبان‌ها پشتیبانی می‌کنه.
این نرم‌افزار رایگان هست، ولی چون ایران تحریم هست، باید از طریق VPN اقدام به دانلود این نرم‌افزار کنید.
با سلام
function buttom4() {
document.getEle mentById("butto m1").style.back ground-color = "#eee8aa";
}
چرا این کد اجرا نمیشه اما اگر color باشه اجرا میشه؟
با سلام.
به خاطر وجود کاراکتر dash (-) در عبارت background-colo r هست. نام نباید از کاراکترهای خاص تشکیل شده باشه و اینجا چون از کاراکتر - استفاده شده، بنابراین کد اجرا نمیشه.
برای حل این مشکل می‌تونید از کد زیر استفاده کنید:
document.getElementById("buttom1").setAttribute("style", "background-colo r:#eee8aa")
با سلام و تشکر بابت سایت عالیتون.یه سوال راجع به مثال اول دارم همه دستورات css رو نمیشه تو یه خط نوشت؟
color font family va size
با سلام.
بله در یک خط میشه چند تا دستور CSS نوشت.
مثل کد زیر:
document.getElementById("butto m1").style = "color:#e89;fon t-family:tahoma ;size:11px;";
فکر کنم فقط می شود خواص خود عناصر html عوض کرد نه خواصی که با css به آن عنصر نسبت میدهیم.؟
این طور نیست. در مثال های درس visibility را تغییر داده ایم. مثال خودتان امتحان کنید زیر را ملاحظه بفرمایید:
beyamooz.com/try_it_yourself/tryit.php?filename=trydhtml_visibility
پس می شود این طور تعریف کرد که تمام کارهایی که با css میتوانستیم انجام دهیم با جاوااسکریپت هم می توانیم.
بله دقیقاً ...