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