قسمت اول
خوب در این بخش می خواهیم با استفاده از متد getElementById صفت style رو مورد خطاب قرار بدیم.
همان طور که خودتون هم می دونید ، صفت style برای استایل دهی در عناصر html به کار می ره .
حالا میخواهیم ، یک استایل به زیرمجموعه Id مورد نظرمون بدیم که باید اون رو با getElementById فراخوانی کنیم.
خوب اول از همه html مورد نظر خودمون رو مثل گذشته ، بدون جاوا اسکریپت می نویسیم :
حالا ما دقیقا چه کاری خواهیم کرد ؟!
الان می خواهیم ، با استفاده از متد getElementById ، صفت style رو جهت تغییر سایز این متن :
JavaScript can change the style of an HTML element.
استفاده کنیم .
الان با کدی که در زیر اضافه میکنیم ، در واقع می خواهیم به دکمه بگیم که وقتی کسی روی تو کلیک کرد ، اون قسمتی که Id مورد نظر ما رو داشت ، روش استایل مورد نظر ما رو اعمال کن ؛ به همین راحتی .
همان طور که مشاهده می کنید ، به دکمه خودمون (button) یک کد جاوا اسکریپت دادیم ؛ با استفاده از صفت onclick و متد getElementById ، آی دی demo رو در سند خودمون (document) پیدا کردیم و style سایز (fontsize) رو اعمال کردیم .
حالا با کلیک کردن روی دکمه ، خواهید دید که سایز نوشته مورد نظر ما بزرگتر میشه !
و این هم کد نهایی :
یک نکته مهم : جاوا اسکریپت به بزرگی و کوچکی کارکترها شدیدا حساس هستش . اگر مثلا حرف E در متد getElementById را e بنویسیم ، کد عمل نخواهد کرد.
خوب در این بخش می خواهیم با استفاده از متد 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 بنویسیم ، کد عمل نخواهد کرد.