Getting Width of a Div Element

How to find the width of a div using vanilla JavaScript?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

How to get width of the parent div

Set in the style of the child div width: 100%; or try margin-right: 0px;

Get DIV width and height in javascript

Since you're already using jQuery, you can just do:

var width;

if (need == 1) {
   width = $("#web").width();
} else {
   width = $("#set").width();
}

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

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

How do I retrieve an HTML element's actual width and height?

You should use the .offsetWidth and .offsetHeight properties.
Note they belong to the element, not .style.

var width = document.getElementById('foo').offsetWidth;

The .getBoundingClientRect() function returns the dimensions and location of the element as floating-point numbers after performing CSS transforms.

> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

How to get the width on where the mouse clicks a div?

A simple approach using background-image to create the color.

document.querySelector(".box").addEventListener("click", function(e){  var position = e.clientX - this.getBoundingClientRect().left;  this.style.backgroundImage = "linear-gradient(90deg, red " + position + "px, transparent " + position + "px)";});

.box {  border: 2px solid #c3c3c3;  height: 200px;  width: 400px;}

<div class="box"></div>

Measure div's width with Javascript

Use getBoundingClientRect:

var rect = ulObject.getBoundingClientRect();
var ulWidth = rect.width;

If you need to support IE8 and previous, you can use

var ulWidth = rect.right - rect.left;

---

Related Topics