JSFiddle - React, Tailwind, and code Playground

by bruno

HTML

<div id="test" style="width:100px; height: 100px">
</div>

CSS

#test {
    width: 100px;
}

JavaScript

function getCSSWidths( id ) {
    
    var stylesheets = document.styleSheets;
    var widths = [];
    var styleWidth;
    
    // loop through each stylesheet
    $.each( stylesheets, function( i, sheet ) {
        
        var len = ( sheet.rules.length || sheet.cssRules.length );
        var rules = sheet.rules || sheet.cssRules;
        
        // loop through rules
        for (var i=0; i < len; i++) {
            
            var rule = rules[i];
            
            // if width is specified in css add to widths array
            if (rule.selectorText.toLowerCase() == "#" + id.toLowerCase() ) {
                widths.push( rule.style.getPropertyValue("width"));
            }
        }
    });
    
    var el = document.getElementById( id );
    
    if( el && el.style && el.style.width ) {
        widths.push( el.style.width );
    }
    
    return widths;
}

console.log( getCSSWidths( "test" ) );