0

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

  1. 获取我们想要获得声明的css属性的元素的计算样式
  2. 创建相同类型的元素并从该计算样式中获取“默认值”
  3. 对其进行迭代并检查是否存在差异，那么很可能意味着它是 CSS 声明中的更改。
  4. 从 DOM 中移除用于测试的 type 元素

因此，通过附加一个新的 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;
}
4

0 回答 0