HTML DOM reflow and repaint CSS declared properties function

Question

I was writing a function so that I can create a nicer CSS function instead of having a repaint and reflow every time I set a slew of css (I know use classes this is just a test case) and so I figured the best thing to do first is to get the declared CSS styles, either by inline, embedded, or external. Thus the explicit_set_styles function was born. Yet the problem is I am still creating a repaint by appending a child element. This is how it works

1. Get the computed style of element we want to get declared css properties
2. Create the same type of element and get the "defaults" from that computed style
3. iterate over that and check for differences if there are some then most likely means it was a change in the CSS declaration.
4. Remove the type element for testing from the DOM

So by appending a new DOM element we repaint the DOM, but that is the only way we can test for defaults because by not appending it all the computed styles are blank 100%. So anyone have solutions to get the default values for comparison values?

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

So I was thinking of doing it two ways possibly? By creating an iframe and not appending it but rather appending the test element to that and getting it's defaults, though if I am correct wouldn't that still take up unnecessary CPU from the browser? I've tested this and my return value looks like so

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

Here is what is actually declared by inline, embedded, and external CSS

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