Question

我正在编写一个函数，这样我就可以创建一个更好的CSS函数，而不是每次设置一大堆css时都有重绘和重排（我知道使用类这只是一个测试用例）所以我认为最好首先要做的是通过内联，嵌入或外部来获取声明的CSS样式。因此explicit_set_styles功能诞生了。然而问题是我仍然通过附加一个子元素来创建一个重绘。这是它的工作原理

获取我们想要声明的css属性的计算元素样式
创建相同类型的元素并从该计算样式中获取“默认值”
对此进行迭代并检查是否存在差异，如果有一些则很可能意味着它是CSS声明中的更改。
从DOM

因此，通过附加一个新的DOM元素，我们重新绘制DOM，但这是我们可以测试默认值的唯一方法，因为通过不附加它，所有计算的样式都是空白的100％。那么任何人都有解决方案来获取比较值的默认值吗？

function explicit_set_styles(){
    var elm_defaultView = (this.ownerDocument || document).defaultView;
    var elm_computedStyles = elm_defaultView.getComputedStyle(this,null);
    var element_test = document.createElement(this.tagName.toLowerCase());
    document.body.appendChild(element_test);
    var et_df = (element_test.ownerDocument || document).defaultView;
    var et_cs = et_df.getComputedStyle(element_test,null);
    var set_styles = null;  

    for(var prop in elm_computedStyles) {
        if( prop !== "cssText" && elm_computedStyles[prop] !== et_cs[prop] ) {
            if(set_styles === null) set_styles = {};
            set_styles[prop] = elm_computedStyles[prop];
          }
    }
    document.body.removeChild(element_test);
    return set_styles;
}

所以我想考虑两种方式吗？通过创建一个iframe而不是附加它，而是将测试元素附加到它并获得它的默认值，但如果我是正确的，那么仍然会从浏览器中占用不必要的CPU吗？我测试了这个，我的返回值看起来像是

{
    alignSelf: "stretch"
    height: "32px"
    left: "0px"
    perspectiveOrigin: "411px 16px"
    position: "absolute"
    right: "0px"
    top: "0px"
    transformOrigin: "411px 16px"
    webkitLogicalHeight: "32px"
}

以下是内联，嵌入和外部CSS实际声明的内容

{
    height: 32px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

HTML DOM重排并重新绘制CSS声明的属性函数

0 个答案: