前端冷知识

前端中有很多冷知识，但都非常有意思，下面我们一起来看一看吧。

HTML中的冷知识

浏览器地址栏运行JavaScript代码

直接在浏览器地址栏中输入  javascript:alert("hello")   就可以发现弹框出现。 _注意_：不能直接将这句复制粘贴，必须手打进去才可以。

浏览器地址栏运行HTML代码

直接在地址栏中输入   data:text/html,<h1>Hello,world!</h1>  就可以发现页面中出现了Hello，world！的内容。

浏览器变成编辑器

直接在浏览器地址啊中输入 data:text/html,<html contenteditable> 这时就可以在页面中输入任何文字了。 _注意_:其中HTML5中的属性contenteditable使得html可编辑。

编辑页面

在console控制台输入 document.body.contentEditable="true";即可使得整个页面可编辑。

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

在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量。于是：页面中若有<div id="example"></div>那么我们就可以在script中直接`console.log(example)`.

利用script标签保存任意信息

将script标签设置为 type=text 并在里面保存任意信息，然后我们就可以在JavaScript中很方便的获取。

><script type="text" id="template">
><h1> This won't display </h1>
></script>

> var text = document.getElementById("template").innerHTML;

CSS中的冷知识

*{cursor :none!important}

相信你知道这是什么。

实时编辑style标签的display:block样式可以让页面的style标签显示出来，并且加上contentEditable属性后可以让样式成为可编辑状态。注意:将style放在body中。

JS中的冷知识

整数的操作

Javascript中是没有整数概念的，但是利用好操作符可以轻松处理，同时获得效率上的提升。  |0和~~是很好的例子，使用这两者将浮点转化成整形效率比parseInt和Math.round要快。
如: >console.log((9/5)|0); // 1
    >console.log((6/5)|0);// 1
    >console.log(~~(9/5)); //1 
    >console.log(~~(6/5)); //1