JS.遍历属性

1、2中:(1)、JS对象的属性:"for (z in ??)"

    (2)、DOM节点的属性:"???.attrributes;"

    (3)、window.getComputedStyle(..., ...);

    (4)、style属性 里面每个值的遍历

2、举例子:

        window.onload = function(evt)
        {
        var text01 = document.getElementById("text01");
    //    text01.removeAttribute("letter-spacing");
    //    delete text01.letterSpacing;

        for (z in text01)
            console.log(z + " --> " + text01[z]);
    /* https://segmentfault.com/q/1010000009666240?_ea=2009998
    var divEle = document.querySelector('#divEle');  //得到数组
    var attrs = divEle.attributes;  //得到所有属性
    var attrsArray = Array.prototype.slice.call(attrs);      //转换为数组形式
    console.log(attrsArray);    // [class,id]
    */

        var attrs = text01.attributes;
        console.log("attrs : " + attrs);
        console.log("attrs[0] : " + attrs[0]);
        console.log("");

        for (var i=0; i<attrs.length; i++)
        {
            console.log(attrs[i].name + " : " + attrs[i].value);
        }
        };

 

3、

        var text01 = document.getElementById("text01");  // ZC: 这是一个 <text/>节点
    //    text01.removeAttribute("letter-spacing");
    //    delete text01.letterSpacing;
delete text01.style;
        for (z in text01)
            console.log(z + " --> " + text01[z]);
        console.log("");
    /* https://segmentfault.com/q/1010000009666240?_ea=2009998
    var divEle = document.querySelector('#divEle');  //得到数组
    var attrs = divEle.attributes;  //得到所有属性
    var attrsArray = Array.prototype.slice.call(attrs);      //转换为数组形式
    console.log(attrsArray);    // [class,id]
    */

        var attrs = text01.attributes;
        console.log("attrs : " + attrs);
        console.log("attrs[0] : " + attrs[0]);
        console.log("");

        for (var i=0; i<attrs.length; i++)
        {
            console.log(attrs[i].name + " : " + attrs[i].value);
        }
        console.log("");
        console.log("");
        console.log("");
        console.log("");

        //result = getComputedStyle(text01, null);
        //console.log("result : " + result.content + " , " + cs.getPropertyValue(style));
        // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
        let cs = window.getComputedStyle(text01, null);
    /*    if (prop)
        {
            console.log("    "+prop+" : "+cs.getPropertyValue(prop)+"\n");
            return;
        }*/
        let len = cs.length;
        for (var i=0;i<len;i++)
        {
            let style = cs[i];
            console.log("    "+style+" : "+cs.getPropertyValue(style)+"\n");
        }

        //text01.style.fontSize = "50px";
        delete text01.style;

        console.log("text01.style.length : "+text01.style.length);
        console.log("text01.style.item(0) : "+text01.style.item(0));
        text01.style.removeProperty(text01.style.item(0));
        console.log("text01.style.length : "+text01.style.length);

 

4、

5、

 

posted @ 2018-08-26 17:04  Html5Skill  阅读(288)  评论(0编辑  收藏  举报