آموزش ویژگی designMode در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی designMode در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی designMode در DOM جاوااسکریپت
با استفاده از ویژگی designMode میتونیم مشخص یا ست یا تنظیم کنیم که آیا یک صفحه ( سند یا Document ) قابل ویرایش باشد یا خیر!؟
منظور از قابل ویرایش کردن یعنی مثلا هرکجای صفحه که کلیک میکنید میتونید محتواشو به دلخواه خودتون تغییر بدید. ( مثال شماره ۱ یا ۲ )
علاوه بر ست کردن، مقداری که این ویژگی بازگشت میده ON ( یعنی بله صفحه قابل ویرایش هست ) یا OFF ( یعنی خیر صفحه قابل ویرایش نیست ) می باشد.
در زبان HTML یه صفت داریم به اسم contenteditable که اونم کارش همینه و میتونه یک عنصر یا صفحه رو قابل ویرایش کنه.
| مقدار برگشتی | یک رشته که نشون میده صفحه قابل ویرایش می باشد یا نمی باشد. اگه on باشه یعنی کل صفحه قابل ویرایش می باشد اگه off باشه یعنی کل صفحه قابل ویرایش نمی باشد |
|---|---|
| مقدار پیش فرض | off |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : فعال کردن قابل ویرایش بودن صفحه
|
1 2 3 4 5 |
<script> document.designMode = "on"; </script> |
مثال شماره ۲ : همون مثال شماره ۱ هس، فقط کمی حرفه ای تر
|
1 2 3 4 5 |
function set(){ document.designMode = "on"; var result = document.getElementById("Result"); result.innerHTML = "فعال"; } |
مثال شماره ۳ : استفاده از صفت contenteditable در HTML برای قابل ویرایش کردن صفحه یا یک تگ خاص
|
1 2 3 4 5 6 7 |
<body> <p contenteditable="true"> روی من کلیک کن و منو تغییر بده </p> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| designMode | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
برای گرفتن وضعیت : ( که یا on هست یا off )
|
1 |
document.designMode; |
برای ست کردن وضعیت :
|
1 |
document.designMode = " on یا off "; |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| on | صفحه ( سند ) قابل ویرایش می باشد |
| off | پیش فرض – صفحه ( سند ) قابل ویرایش نمی باشد |
Free-Learn
نکات و توضیحات
- در زبان HTML یه صفت داریم به اسم صفت contenteditable که اونم کارش همینه که یک عنصر یا صفحه رو قابل ویرایش کنه.
- مقدار پیش فرض این ویژگی off می باشد، این یعنی صفحه بصورت پیش فرض قابل ویرایش نیست.
