想起以前讀大學時有個比賽,是為學校招生網站提出建議。在截止日將近時,我和一位同學才決定組隊參賽 (被大獎吸引,好像是 $5000 百佳現金券呢,最後我們對半分了),然後飛快兩三日內趕一份建議書出來。
建議書包含不少修改參考圖,其製作方式多是修改網頁的 HTML 或直接使用 Bookmarklet 編輯網頁內容,再截圖。
* Bookmarklet 是將一段 JavaScript 保存為 Bookmark, 然後需要用到時,點擊 Bookmark 運行,達到想要的效果。
執行效果
以下這段 JavaScript, 保存成 Bookmark ,點擊便能用它隨意修改當前網頁的內容了。
javascript:document.body.contentEditable = true; document.designMode='on'; void 0;
除了這做法外,也可以簡單 F12
然後在 Console
裡輸入這段 JavaScript, 效果一樣。
關閉效果
你可能會發現某些語詞底下會有波浪線,這是拼字檢查所致。關掉編輯效果便可以了。
javascript:document.body.contentEditable = false; document.designMode='off'; void 0;
References
The WHATWG Blog — The Road to HTML 5: contentEditable
Differences between designMode and contentEditable | nagoon97’s Weblog (wordpress.com)