آموزش جاوا اسکریپت قسمت 2

ساخت وبلاگ

آخرین مطالب

امکانات وب

آموزش جاوا اسکریپت قسمت 2

خوب در این بخش می خواهیم با استفاده از متد getElementById صفت style رو مورد خطاب قرار بدیم.
همان طور که خودتون هم می دونید ، صفت style برای استایل دهی در عناصر html به کار می ره .
حالا میخواهیم ، یک استایل به زیرمجموعه Id مورد نظرمون بدیم که باید اون رو با getElementById فراخوانی کنیم.
خوب اول از همه html مورد نظر خودمون رو مثل گذشته ، بدون جاوا اسکریپت می نویسیم :
<!DOCTYPE html>
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" >اعمال استایل مورد نظر</button>
</body>
</html>

حالا ما دقیقا چه کاری خواهیم کرد ؟!
الان می خواهیم ، با استفاده از متد getElementById ، صفت style رو جهت تغییر سایز این متن :
JavaScript can change the style of an HTML element.
استفاده کنیم .
الان با کدی که در زیر اضافه میکنیم ، در واقع می خواهیم به دکمه بگیم که وقتی کسی روی تو کلیک کرد ، اون قسمتی که Id مورد نظر ما رو داشت ، روش استایل مورد نظر ما رو اعمال کن ؛ به همین راحتی .

کد:

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'" >اعمال استایل مورد نظر</button>

همان طور که مشاهده می کنید ، به دکمه خودمون (button) یک کد جاوا اسکریپت دادیم ؛ با استفاده از صفت onclick و متد getElementById ، آی دی demo رو در سند خودمون (document) پیدا کردیم و style سایز (fontsize) رو اعمال کردیم .
حالا با کلیک کردن روی دکمه ، خواهید دید که سایز نوشته مورد نظر ما بزرگتر میشه !
و این هم کد نهایی :

کد:

<!DOCTYPE html>
<html>
<body>

<h1>What Can JavaScript Do?</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'" >اعمال استایل مورد نظر</button>

</body>
</html>

یک نکته مهم : جاوا اسکریپت به بزرگی و کوچکی کارکترها شدیدا حساس هستش . اگر مثلا حرف E در متد getElementById را e بنویسیم ، کد عمل نخواهد کرد.

برنامه نویس...
ما را در سایت برنامه نویس دنبال می کنید

برچسب : نویسنده : خنجی prog بازدید : 133 تاريخ : سه شنبه 5 مرداد 1395 ساعت: 18:41

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه