在瀏覽器窗口中可以修改style的樣式，並且網頁會同步顯示效果，這樣做並沒有什么實際的開發用途，只是一個比較好玩的html知識。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body style { display: block;/*讓樣式在html頁面中可以顯示*/ white-space: pre-wrap;/*讓樣式在html頁面中換行 顯得美觀*/ } </style> </head> <body> <style contenteditable="true">/*讓樣式在html頁面中可以被編輯*/ .div { height: 400px; color: #f00; font-size: 18px; } </style> <div class="div"> 我是div中的內容 </div> </body> </html>
這樣樣式就可以在html頁面中編輯了，所操作的元素樣式也會及時改變。
contenteditable 屬性是html5的一個全局屬性，規定是否可編輯元素的內容，並不經常使用，誰沒事會允許別人修改自己的網頁。
但是有一個用途是，它可以替代textare這個標簽的用途，html中的textare元素默認不會隨着輸入的行數自動增高，這在某些用途下不方便，例如寫對話框，特點是在一定高度內可以隨着輸入的行數增高。這個功能使用textarea做會很麻煩，所以可以使用一個可編輯的div框來代替。
<div contenteditable="true"> 我是可編輯的div框 </div>
這樣可以控制div的樣式模擬輸入文本域，取值設值的使用可以用innerHTML或者jquery的text()、html()等方法。重要的是可以設置max-height屬性，在最大高度內允許自動增高。
個人總結筆記，有誤請指出，謝謝！