حتما این روزها بسیار دیده اید که در صفحات ایتنرنتی اطلاعات موجود در صفحه تنها با یک کلیک تغییر می کند و یا شیئی جابجا می شود یا ناپدید می گردد. حتما کنجکاو شده اید که چگونه می توان این کار را انجام داد. ابتدا نمونه کدی را برایتان شرح می دهم.
function Change(){
document.getElementById(‘test’).innerHTML = ‘ShirazITCo’
}
از آنجایی که این مقاله برای برنامه نویسان نسبتاٌ پیشرفته هست پس از بخش اسکریپت ها شروع میکنیم.
در ابتدا که این اسکریپت اجرا می شود متن Div inside مشاهده می شود. اما پس از کلیک کردن بر روی این متن تابع Change که در رویداد مربوط به onclick (هنگامی که بر روی من کلیک شد) است اجرا می شود.
در تابع Change این چنین تعریف شده است:
document.getElementById(‘test’).innerHTML = ‘ShirazITCo’
‘ShirazITCo’ = کد html درون آن . شیئ که ID آن Test است را انتخاب کن . در میان اشیائ صفحه
به این سادگی می توان با تعریف 1 تابع ساده اجزاء درون هر تگ دیگری مانند Div را تغییر داد.
همچنین به جای innerHTML می توانید از توابع دیگری که در جدول زیر آمده اند استفاده کنید.
توجه: هرکدام از این توابع برای اشیاء خاصی استفاده می شوند.
|
تابع |
اشیاء تحت تاثیر |
توضیح |
|
innerHTML |
Div,p,fieldest |
کد html درون تگ |
|
Value |
Input |
مقدارشیئ را تعیین می کند |
|
style |
any |
CSS شیئ را تعیین می کند |
|
width |
any |
عرض شیئی |
|
height |
any |
طول شیئ |
|
length |
Textbox , text |
طول متن درون شیئ |
|
align |
any |
چگونگی جایگیری در صفحه (چپ , مرکز, راست) |
|
size |
input |
اندازه |
|
src |
Iframe , img |
منبع |
|
border |
any |
حاشیه |
|
defaultValue |
input |
مقدار پیشفرض |
|
defaultChecked |
Checkbox |
انتخاب شده به صورت پیشفرض |
|
defaultSelected |
Radiobox |
انتخاب شده به صورت پیشفرض |
|
checked |
Checkbox , Radiobox |
انتخاب شده |
