{首页主词},&

【Web開發】你可能不知道的 18 個HTML/CSS/JavaScript前端技巧

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2025年6月13日 10:36 本文熱度 296

作為前端開發者，我們通常關注的是全局——框架、庫和主要功能。但有時，一些鮮為人知的技巧也能讓我們的工作真正閃耀光芒。

今天，我們將深入探討 18 個鮮為人知的前端小技巧，它們可能會給你帶來驚喜，提升你的開發水平。

1. 瀏覽器地址欄：不止眼前所見

你知道瀏覽器的地址欄不僅僅是導航功能嗎？讓我們來探索一些隱藏的功能：

1.1 執行 JavaScript 代碼

試試這個：在地址欄中輸入 javascript:alert('Hello, World!') 并按回車鍵。瞧！你已經直接從地址欄運行了 JavaScript。

專業提示：某些瀏覽器可能會出于安全原因刪除 javascript: 部分。在這種情況下，你需要手動輸入。

你也可以使用 location.href 或 window.open 來實現相同的效果：

location.href = "javascript:alert('Hello, World!')";window.open("javascript:alert('Hello, World!')");

1.2 運行 HTML

想把你的瀏覽器標簽頁變成一個迷你 HTML 游樂場嗎？試試這個：

data:text/html,<div>Hello, World!</div>

等等，還有更多！你可以使用以下方法創建一個即時編輯器：

data:text/html,<html contenteditable>

現在，你手邊就有一個完全可編輯的頁面！

2. 使任何網頁都可編輯

想編輯任何網頁上的文本嗎？這里有一行代碼可以實現：

document.body.contentEditable = 'true';

將這段代碼粘貼到瀏覽器的控制臺中，整個頁面瞬間就變成了你的畫布！

3. 使用錨標簽解析 URL

需要快速解析 URL？不起眼的 <a> 標簽可以幫你搞定：

const a = document.createElement('a');a.href = 'https://www.example.com/path?param1=value1#hash';console.log(a.host);     // www.example.comconsole.log(a.pathname); // /pathconsole.log(a.search);   // ?param1=value1console.log(a.hash);     // #hash

4. HTML ID 和全局變量的奇葩案例

你知道元素的 ID 會變成全局變量嗎？真的！

<div id="myElement"></div><script>  console.log(myElement); // <div id="myElement"></div></script>

但要小心——如果你沒有意識到這一點，可能會導致意外的行為。

5. CDN 鏈接中的協議相對 URL

從 CDN 加載資源時，可以省略協議：

<script src="http://cdn.example.com/script.js"></script>

這個巧妙的技巧可以確保資源使用與當前頁面相同的協議加載。

6. 光標消失惡作劇

想迷惑你的同事嗎？試試這個 CSS：

* {  cursor: none !important;}

看著他們費力地尋找光標！（當然，要謹慎使用。）

7. 使用 CSS 實現文本模糊效果

使用 text-shadow 創建酷炫的文本模糊效果：

.blurred-text {  color: transparent;  text-shadow: #111 0 0 5px;  user-select: none;}

非常適合那些“被遮蓋”的效果！

8. Hidden 屬性

無需 JavaScript 或 CSS 即可隱藏元素：

<div hidden>Now you see me, now you don't!</div>

簡單、語義化且有效。

9. 保護你的代碼（某種程度上）

雖然并非萬無一失，但你可以阻止隨意的檢查：

// Disable F12 keydocument.addEventListener('keydown', (e) => {  if (e.keyCode === 123) e.preventDefault();});// Disable right-clickdocument.addEventListener('contextmenu', (e) => {  e.preventDefault();});

請記住，這不是真正的安全——只是一個小障礙。

10. CSS 三角形

用純 CSS 創建三角形：

.triangle {  width: 0;  height: 0;  border: 20px solid transparent;  border-top-color: red;}

有了 CSS，誰還需要圖片？

11. 無窮悖論

這里有一個 JavaScript 怪癖，可能會讓你大吃一驚：

const a = Infinity;console.log(a === a - 1); // true

無窮大減一仍然是無窮大！

12. 數字包裝器奇聞

你有沒有試過在數字字面量上調用方法？

1.toString(); // Syntax Error1..toString(); // Works! Returns "1"

那個額外的點至關重要。

13. 防止 iframe 嵌入

防止您的網站被嵌入 iframe：

if (window.location !== window.parent.location) {  window.parent.location = window.location;}

讓您的內容保持在它應該在的位置！

14. 被低估的 <datalist>

使用 <datalist> 增強您的輸入字段：

<input list="fruits" name="fruit"><datalist id="fruits">  <option value="Apple">  <option value="Banana">  <option value="Cherry"></datalist>

它類似于 <select>，但可以輸入！

15. 使用 CSS 實現豎排文本

將文本橫向顯示：

.vertical-text {  writing-mode: vertical-rl;  text-orientation: upright;}

非常適合東亞語言風格。

16. 防止文本被選中

不想讓用戶選中您的文本？

document.addEventListener('selectstart', (e) => {  e.preventDefault();});

請謹慎使用，因為它會影響可訪問性。

17. 一行多個表達式

使用逗號運算符組合表達式：

let a = 1, b = 2;(a += 2), (b += 3);console.log(a, b); // 3, 5

簡潔，但請謹慎使用以提高可讀性。

18. inset 簡寫

使用 inset 簡化你的定位：

.box {  position: absolute;  inset: 0; /* Equivalent to top: 0; right: 0; bottom: 0; left: 0; */}

更少的輸入，同樣的效果！

總結

這 18 個前端技巧展示了 Web 技術的深度和奇特之處。有些技巧在日常使用中很實用，而另一些則更具奇特之處，凸顯了瀏覽器和 Web 標準的復雜性。

記住，能力越大，責任越大。請明智地使用這些技巧，始終將性能、可訪問性和用戶體驗放在首位。祝您編碼愉快！

該文章在 2025/6/13 10:36:36 編輯過