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