前端開發中這些小技巧，你知道幾個？
作者：maomin9761
本篇就給你介紹一下前端開發中的這些技巧，以及相關的工具，希望對你有所幫助！
瀏覽器地址欄運行JavaScript代碼
- javascript:alert('hello!');
- Firefox不支持；
- 其他瀏覽器必須手動輸入才可執行；
瀏覽器地址欄運行HTML代碼
- data:text/html,<h1>Hello, world!</h1>
- 在非IE瀏覽器可以運行
瀏覽器變成文本編輯器
地址欄輸入：
- data:text/html, <html contenteditable>
控制臺輸入：
- document.body.contentEditable='true';
利用a標簽自動解析URL
- var a = document.createElement('a');
- a.href = 'https://www.maomin.club';
- console.log(a.host); // www.maomin.club
頁面擁有ID的元素會創建全局變量
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- </head>
- <body>
- <div id="app">我是內容</div>
- <script type="text/javascript">
- console.log(app.textContent) // 我是內容
- </script>
- </body>
- </html>
引用CDN文件時，不用HTTP標識
- <script src="//cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js"></script>
利用script標簽保存任意信息
- <script type="text" id="template">
- <h1>This won't display</h1>
- </script>
- <script type="text/javascript">
- const text = document.getElementById('template').textContent;
- console.log(text); // <h1>This won't display</h1>
- </script>
在頁面中隱藏鼠標
- *{
- cursor: none!important;
- }
文字模糊效果
- p {
- color: transparent;
- text-shadow: #111 0 0 5px;
- }
實時編輯CSS
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <style type="text/css">
- style{
- display: block;
- }
- </style>
- </head>
- <body>
- <style contentEditable>
- body { color: blue }
- </style>
- </body>
- </html>
實現長寬比固定區域
- <div style="width: 100%; position: relative; padding-bottom: 56.25%;">
- <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
- this content will have a constant aspect ratio that varies based on the width.
- </div>
- </div>
禁止他人使用iframe標簽引用網址
- if (window.location != window.parent.location) window.parent.location = window.location;
生成隨機字符串
- function generateRandomAlphaNum(len) {
- var rdmString = "";
- for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
- return rdmString.substr(0, len);
- }
浮點數轉化為整數
- console.log(~~1.2); // 1
責任編輯：姜華
來源：
前端歷劫之路
