I want width of a div element which is specified by developer. Means if you write $('body').width(), it will provide you width in px , whether you have specified it or not.

I need width of div specified in CSS/JavaScript but not which is calculated by jQuery (which was not actually specified but was inherited).

If not width is specified then I need to know.

I want width of a div element which is specified by developer. Means if you write $('body').width(), it will provide you width in px , whether you have specified it or not.

I need width of div specified in CSS/JavaScript but not which is calculated by jQuery (which was not actually specified but was inherited).

If not width is specified then I need to know.

• javascript
• jquery
• html

• @Bruno , but if I haven't specified any width for body , its taking width of browser.I need to know if width is written for element (here body) or its inherited. – Johnny Commented Oct 26, 2012 at 11:22
• @Bruno, You will improve your reputation faster if you write answers to questions. – Buh Buh Commented Oct 26, 2012 at 11:22
• Have you tried solving the problem? – Yoshi Commented Oct 26, 2012 at 11:22
• @Yoshi , yes .But just not understanding if width is applied by css or its inherited. – Johnny Commented Oct 26, 2012 at 11:24
• sorry about that. Will look for the real answer :( – Bruno Commented Oct 26, 2012 at 11:24

5 Answers 5

The code below will loop through all stylesheets as well as the matching element's style property. This function will return an array of widths.

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

    // get width specified in the html style attribute
    if( el && el.style && el.style.width ) {
        widths.push( el.style.width );
    }

    return widths;
}

getCSSWidths( "test" );

Fiddle here

There is one issue that I can see though as multiple selectors can be specified in the selectorText i.e.

#id1, #id2, .class1 {
    // properties
}

In these cases the id passed in as an argument will not match the selectorText property. Maybe someone can e up with a regex expression that will match the specified id :)

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script>
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

Possibly duplicate with get CSS rule's percentage value in jQuery or Getting values of global stylesheet in jQuery

For the Javascript specified width, you can try this:

document.getElementById("myDivElement").style.width

If the above returns an empty string, it means it has not been specified by Javascript.

As for rules specified through CSS, find the class name(s) of the element and then the rules specified for that class:

var className = document.getElementById("myDivElement").className;

var cssWidth = getWidthFromClassname(className);

Now you need to define getWidthFromClassname:

function getWidthFromClassname(className)
{
    var reqWidth;
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
             reqWidth = classes[x].style.getPropertyValue("width");
             break;
        }
    }

    return reqWidth;
}

document.getElementById('divid').style.width

You could use the clientWidth property, it calculates the actual width of the element, regardless if set through CSS or if it's the natural flow of the document:

document.getElementById('divId').clientWidth

If you want the full content width with margins/paddings/border you can use offsetWidth:

document.getElementById('divId').offsetWidth

https://developer.mozilla/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla/en-US/docs/DOM/element.clientWidth