• HTML5 新的API 窗体可视区 scrollIntoView dataset calssList


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




  • 相关阅读:
    html页面中的转意字符
    bootstrap学习笔记3- navbar-header navbar-toggle 类 data-toggle和data-target
    DIV嵌套过程中的高度自适应问题
    <span class="icon-bar"></span> 不显示?
    CSS中定位的浮动float
    CSS 盒模型,块级元素和行内元素的区别和特性
    CSS padding
    CSS Position(定位)
    网络资料
    vue中 具名插槽+作用域插槽的混合使用
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/7132213.html
Copyright © 2020-2023  润新知