scrollIntoView方法有两个參数 布尔值 true 和 false 使用true或者空会让调用这种方法的元素和浏览器顶部对齐 出如今可视区。使用參数false 也会出现可视区,可是不会和顶部对齐,它会和顶部有一段的距离。
调用方法:
document.getElementsByTagName("ul")[0].scrollIntoView(true);
ul就会出如今可视区,省去了我们要算scrollTop等一些算法。
相信对非常多效果都非常有帮助。浏览器支持情况:高等浏览器支持。
dataset 是我今天再看REM计算的时候发现的 设置HTML 的data-dpr。
HTML5里面同意自己定义属性“data-”,看个样例:
<div id="day2-meal-expense" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
假设没实用dataset我们要获取这些属性的话,我们须要获取DOM的attributes,循环获取设置,或者用我们属性的getAttribute和setAttribute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <div class="woow" data-one="1111" data-two="222" data-three="333"> </div> </body> <script> !(function(win,undefined){ var woow=document.querySelector(".woow"),attrs=woow.attributes,attrVlue={}; for (var i = 0; i < attrs.length; i++) { if(attrs[i].name.substring(0,5)=="data-"){ attrVlue[attrs[i].name.substring(5)]=attrs[i].value; } }; console.log(attrVlue); //Object {one: "1111", two: "222", three: "333"} console.log(woow.dataset); //DOMStringMap {one: "1111", two: "222", three: "333"} delete woow.dataset.one; console.log(woow.dataset);//DOMStringMap {two: "222", three: "333"} woow.dataset.foure="444"; console.log(woow.dataset);//DOMStringMap {two: "222", three: "333", foure: "444"} })(window,document) </script> </html>
可是用dataset一句话就能够了
woow.dataset
看上面的console.log输出就能够了.
性能方面大大增强!
删除某个data属性值 delete dom.dataset.attrName;
设置某个data属性值 dom dataset attrName="value";
/************************************************************************************************************************************************************************/
classList 返回当前全部的list值,方法有add,remove contains,toggle,item方法和length属性,大大的简化了我们操作className的流程。
可是add,remove仅仅能一个个的加入,可是我们能够扩展这种方法:
DOMTokenList.prototype.adds = function(tokens) { tokens.split(" ").forEach(function(token) { this.add(token); }.bind(this)); return this; };
删除也是这种方法,可是前提要推断是否有这个class
DOMTokenList.prototype.removes = function(tokens) { tokens.split(" ").forEach(function(token) { if(this.contains(token)){ this.remove(token); }else{ return; } }.bind(this)); return this; };