How to get defined width of element via JS? [duplicate]

Question

I need to find out the width which is defined via CSS of an element on the page; I do not need the actual width which was calculated by the browser!

It's no problem to get the width value from an inline style attribute, but how do I get the width-definition when it is inside a CSS file?

Here's a short sample with 3 div-elements:

• The first div uses an inline CSS width, which I can find.
• The second div has a relative width defined via CSS → How can I find the "50%" value?
• The third div has no width definition → How can I find out that this div has no width?

var box1 = document.getElementById('item1');
var box2 = document.getElementById('item2');
var box3 = document.getElementById('item3');

console.log('Box 1 width:', box1.style.width); // all good!
console.log('Box 2 width:', box2.style.width); // required result: "50%"
console.log('Box 3 width:', box3.style.width); // required result: "", "initial" or undefined

#item1 { width: 200px; }
#item2 { width: 50%; }

#item1, #item2, #item3 { background: #ccc; margin: 2px; padding: 5px }

<div id="item1" style="width: auto">Box 1</div>
<div id="item2">Box 2</div>
<div id="item3">Box 3</div>

Answer 1

EDIT

One point my original answer missed is: If the element has an inline style being applied, use that, then look to the stylesheet if there is no inline style.

getComputedStyle will give you the actual width of the div, not the width specified in the style sheet.

If you need to find out the rules defined in a stylesheet, not the actual style values of an element, you can do so by iterating over the stylesheet.

let cssRules = Array.from(document.styleSheets[0].rules); //the 3 styles youve set
function getStylesheetPropertyForElement(id, property) {
    let element = document.getElementById(id), appliedStyle ="";
    if (!element) return false;
    // prefer inline style if available!
    if (element.style[property]) return element.style[property];//
    // reverse the order of the rules. 
    // naively assumes the most recent rule is the one thats applied
    // makes no attempt to handle priority and !important
    cssRules.reverse().some(rule => {
        // does the selector for this rule match?
        if (element.matches(rule.selectorText)) {
            //yes. is there a rule for the required property?
            if (Array.from(rule.style).some(el=>el === property)) {
                // great
                appliedStyle = rule.style[property];
                return true;
            }
        }
    });
    return appliedStyle;
}
console.log(getStylesheetPropertyForElement('item1', 'width')); //auto
console.log(getStylesheetPropertyForElement('item2', 'width')); //50%
console.log(getStylesheetPropertyForElement('item3', 'width')); //""

#item1 { width: 200px; }
#item2 { width: 50%; }

#item1, #item2, #item3 { background: #ccc; margin: 2px; padding: 5px }

<div id="item1" style="width: auto">Box 1</div>
<div id="item2">Box 2</div>
<div id="item3">Box 3</div>