HTML5 新的API 窗口可视区 scrollIntoView dataset calssList

最新推荐文章于 2021-07-02 05:19:25 发布

寓言s

最新推荐文章于 2021-07-02 05:19:25 发布

阅读量2k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u011551941/article/details/47105891

版权

javascript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

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;
            };

寓言s

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5 新的API 窗口可视区 scrollIntoView dataset calssList

scrollIntoView方法有两个参数布尔值 true 和 false 使用true或者空会让调用这个方法的元素和浏览器顶部对齐出现在可视区，使用参数false 也会出现可视区，但是不会和顶部对齐，它会和顶部有一段的距离。调用方法：document.getElementsByTagName("ul")[0].scrollIntoView(true);ul就会出现在可视区，省去
复制链接

扫一扫

专栏目录