How can I get width of div, which is written in CSS

Question

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.

@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, Oct 26 '12 at 11:22
@Bruno, You will improve your reputation faster if you write answers to questions. — Buh Buh, Oct 26 '12 at 11:22
@Yoshi , yes .But just not understanding if width is applied by css or its inherited. — Johnny, Oct 26 '12 at 11:24
np @Bruno , I me looking for same.And I may be new at stack but not in html. :-) — Johnny, Oct 26 '12 at 11:41

score 2 · Answer 1 · edited May 23 '17 at 11:48

<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

Bruno · Accepted Answer · 2012-10-26T12:59:27.043

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 come up with a regex expression that will match the specified id :)

This is the closest answer.but still not exact... :-) – Johnny Oct 27 '12 at 08:21 — Johnny, Oct 27 '12 at 08:21

score 1 · Answer 3 · answered Oct 26 '12 at 11:34

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

That complicates things. Perhaps you can iterate parent elements and find their width/css rule and compare with the offsetWidth of the element to determine whether its width is inherited or not(if a CSS rule specified width is equal to the offsetWidth, you can conclude that the width is inherited). — Vinod Vishwanath, Oct 26 '12 at 11:40
I am doing same but process is very slow and not fullproof, also unoptimised. — Johnny, Oct 26 '12 at 11:43

score 0 · Answer 4 · answered Oct 26 '12 at 11:22

0

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

answered Oct 26 '12 at 11:22

Arun Killu

13,581
5
34
61

Jan · Answer 5 · 2012-10-26T11:33:01.623

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.org/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla.org/en-US/docs/DOM/element.clientWidth

How can I get width of div, which is written in CSS

5 Answers5