본문 바로가기
JavaScript

JavaScript 계산된 스타일 속성 가져오기

by ddss6565 2023. 7. 17.

화면에 그려지면서 계산되므로 width, height 값 등도 같이 가져와짐.

function getCleanSetOfStyles(el)
{
    var targetDOMElement = el;
    var targetObjsStyles = document.defaultView.getComputedStyle(targetDOMElement);

    var tempCopyOfTarget = document.createElement(targetDOMElement.tagName);
    document.body.insertAdjacentElement('afterBegin', tempCopyOfTarget);
    var basicElementsCSS = document.defaultView.getComputedStyle(tempCopyOfTarget);

    var cleanSetOfStyles = {};
    Object.entries(targetObjsStyles).forEach(p => {
        if(basicElementsCSS[p[0]] !== p[1]){
            cleanSetOfStyles[p[0]] = p[1];
        }
    });

    tempCopyOfTarget.remove();
    
    var keys = Object.keys(cleanSetOfStyles);
    for(var key of keys)
    {
        // console.log(key, cleanSetOfStyles[key]); // width, 1813px
    }
    
    return cleanSetOfStyles;
}
반응형

댓글