前端開發中這些小技巧，你知道幾個？

作者：maomin9761 2021-06-01 05:16:49

本篇就給你介紹一下前端開發中的這些技巧，以及相關的工具，希望對你有所幫助！

瀏覽器地址欄運行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

責任編輯：姜華來源：前端歷劫之路

前端開發技術熱點