娱乐冷门小知识

1、浏览器运行HTML 代码

data:text/html,<meta charset="UTF-8"><div id="test">我在浏览器中显示</div>

很神奇对吧，但是前提是只有是非IE浏览器才能这么玩。

2、浏览器当做编辑器

data:text/html,<html cententeditable>

归根结底多亏了HTML5中新加的 contenteditable 属性，当元素指定了该属性后，元素的内容成为可编辑状态。

推而广之，将以下代码放到console执行后，整个页面将变得可编辑，随意践踏吧~

document.body.contentEditable='true';

3、利用a标签自动解析URL

var  a  = document .createElement ('a' );

a. href =  'http://www.cnblogs.com/wayou/p/';

console. log( a. host);

4、页面拥有ID的元素会创建全局变量

< div id ="sample" ></div >

<script  type= "text/javascript">

  console. log( sample);

</script>

5、加载CDN文件时，可以省掉HTTP标识

现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

<script src="//domain.com/path/to/script.js"></script>

6、console.log() 能变颜色

利用%c让你从一堆调试信息中找到重点！

7、console.table

把对象输出成表格，还是有点小用的。

8、console.time() 和 console.timeEnd() 测试耗时

想要知道某段代码消耗了多长时间？用这个就可以帮助你实现。

9.你可能都没有注意到chrome的这个小按钮

美化压缩后的代码，一步到位！

10.令人头疼的垂直居中translateY来帮忙

/* 垂直居中 */
.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
/* 水平居中 */
.horizontal-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%); 
}

作者：掘金5025
链接：https://juejin.im/post/5ad1bce46fb9a028cc61a8c0
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。