Question

我最近正在尝试这种HTML比较，这有点奏效：

/**
 * Compare 2 dom nodes
 * Given A node, identifier, B node, identifier, depth.
 */
function compare(A,Aid,B,Bid,godeep) {
    if (A.nodeName != B.nodeName) {
        addlog(Aid+' is <'+A.nodeName+'>, '+Bid+' is <'+B.nodeName+'>.');
    }
    for (let a=0; a<A.attributes.length; a++) {
        let key = A.attributes[a].name,
            other = B.attributes[key];
        if (other !== undefined) {//both have attr.
            if (A.attributes[a].value != other.value) {
                addlog(Aid+' has attr '+key+'='+A.attributes[key].value);
                addlog(Bid+' has attr '+key+'='+B.attributes[key].value);
            }
        } else {
            addlog(Aid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
        }
    }
    //Also check for the other's unique attr:
    for (let b=0; b<B.attributes.length; b++) {
        let key = B.attributes[b].name,
            other = A.attributes[key];
        if (other === undefined) {
            addlog(Bid+' has attr '+key+'='+A.attributes[key].value+', not in other el.')
        }
    }
    //TODO: Why does this not work correctly for styles? height and other attributes are not the same
    // when comparing the same element to itself.
    var cssA = A.ownerDocument.defaultView.getComputedStyle(A,null),
        cssB = B.ownerDocument.defaultView.getComputedStyle(B,null);
    console.log(cssA);
    console.log(cssB);
    for (let i=0; i<cssA.length; i++) {
        if (cssA.getPropertyValue(cssA[i]) != cssB.getPropertyValue(cssB[i])) {
            addlog(Aid+' css '+cssA[i]+'='+cssA.getPropertyValue(cssA[i]));
            addlog(Bid+' css '+cssB[i]+'='+cssB.getPropertyValue(cssB[i]));
        }
    }
    if (A.children.length != B.children.length) {
        addlog(Aid+' has '+A.children.length+' children, '+Bid+' has '+B.children.length);
    }
    if (godeep > 0) {
        for (let i=0; i<A.children.length; i++) {
            if (i< B.children.length) { //compare it
                compare(A.children[i], Aid+'.children['+i+']',
                        B.children[i], Bid+'.children['+i+']')
            }
        }
    }
}

（完整来源here）奇怪的是，当将同一个节点与自身进行比较时，它表示它自己的属性是不同的：

A css border-bottom-color=rgb(0, 0, 0)
B css border-bottom-color=rgb(51, 51, 51)
A css border-left-color=rgb(0, 0, 0)
B css border-left-color=rgb(51, 51, 51)
A css border-right-color=rgb(0, 0, 0)
B css border-right-color=rgb(51, 51, 51)
A css border-top-color=rgb(0, 0, 0)
B css border-top-color=rgb(51, 51, 51)
A css color=rgb(0, 0, 0)
B css color=rgb(51, 51, 51)
A css font-family=serif
B css font-family=Helvetica,arial,freesans,clean,sans-serif
A css font-size=16px
B css font-size=14px
A css font-weight=400
B css font-weight=700
A css height=auto
B css height=19.6px
A css line-height=19px
B css line-height=19.6px
A css list-style-type=disc
B css list-style-type=none
A css margin-bottom=16px
B css margin-bottom=1px
A css margin-top=16px
B css margin-top=1px
A css perspective-origin=50% 50%
B css perspective-origin=429px 9.8px
A css transform-origin=50% 50%
B css transform-origin=429px 9.8px
A css width=auto
B css width=858px
A css -moz-column-gap=16px
B css -moz-column-gap=14px
A css -moz-column-rule-color=rgb(0, 0, 0)
B css -moz-column-rule-color=rgb(51, 51, 51)
A css -moz-text-decoration-color=rgb(0, 0, 0)
B css -moz-text-decoration-color=rgb(51, 51, 51)

可能导致这场冲突的原因是什么？有没有办法使用getComputedStyle而没有这种奇怪的行为？

更新

您可以在此处看到this在浏览器中有效，但在Chrome权限代码中不起作用，因为您可以看看是否尝试了this branch devtools-tweaks。

Answer 1

看起来问题是输入 - node.cloneNode(true)显然将元素与其css样式信息分离。

奇怪的getComputedStyle行为

1 个答案: