HTML DOM designMode প্রপার্টি আমাদের পুরো ডকুমেন্ট সম্পাদনাযোগ্য (editable) কিনা তা নির্দিষ্ট করতে দেয়। এটি HTML ডকুমেন্টকে একটি WYSIWYG (What You See Is What You Get) এডিটরের মতো কাজ করার যোগ্য করে কারণ আমরা HTML ডকুমেন্ট সম্পাদনা করতে পারি। এই প্রপার্টি ডিফল্টভাবে "off" সেট থাকে এবং "on" সেট করলে আমরা ডকুমেন্ট সম্পাদনা করতে পারি।
সিনট্যাক্স
designMode প্রপার্টি সেট করার সিনট্যাক্স:
document.designMode = "on|off"
এখানে, "off" ডিফল্ট মান এবং "on" সেট করলে ডকুমেন্ট সম্পাদনা করার অনুমতি দেয়।
উদাহরণ
HTML DOM designMode প্রপার্টির উদাহরণ:
<!DOCTYPE html> <html> <body> <h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button> <script> document.designMode="on"; </script> </body> </html>
আউটপুট
নিচের আউটপুট তৈরি হবে:

ডকুমেন্ট সম্পাদনা করার পর:

উপরের উদাহরণে:
আমরা বেশ কিছু HTML এলিমেন্ট তৈরি করেছি। উদাহরণস্বরূপ, একটি <h1> এলিমেন্ট, একটি <p> এবং একটি <button> এলিমেন্ট:
<h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button>
তারপর আমরা document.designMode "on" সেট করেছি যা আমাদের HTML ডকুমেন্ট সম্পাদনা করার অনুমতি দেয়। এখন আমরা যেকোনো টেক্সট পরিবর্তন করতে পারি এবং এমনকি এলিমেন্টগুলোও টেক্সট ক্লিয়ার করে মুছে ফেলতে পারি।
উদাহরণ: বাটনের টেক্সট মুছে দিলে বাটনটিও মুছে যাবে।
<script> document.designMode="on"; </script>