javascript - HTML DOM reflow and repaint CSS declared properties function -

i writing function can create nicer css function instead of having repaint , reflow every time set slew of css (i know use classes test case) , figured best thing first declared css styles, either inline, embedded, or external. explicit_set_styles function born. yet problem still creating repaint appending child element. how works

1. get computed style of element want declared css properties
2. create same type of element , "defaults" computed style
3. iterate on , check differences if there means change in css declaration.
4. remove type element testing dom

so appending new dom element repaint dom, way can test defaults because not appending computed styles blank 100%. have solutions default values 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 thinking of doing 2 ways possibly? creating iframe , not appending rather appending test element , getting it's defaults, though if correct wouldn't still take unnecessary cpu browser? i've tested , return value looks so

{     alignself: "stretch"     height: "32px"     left: "0px"     perspectiveorigin: "411px 16px"     position: "absolute"     right: "0px"     top: "0px"     transformorigin: "411px 16px"     webkitlogicalheight: "32px" } 

here declared inline, embedded, , external css

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