Get the width of a div when width set by css class

Question

This JS script gives me an alertbox saying;

jQuery.UI.version = 1.0.2  ---   Box Width: undefined

How can I select the #resizable?

 <head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
       <style>
  #resizable { width: 200px; height: 150px; padding: 5px; border: 1px solid red;}

  </style>

      <script>
        $(function () {
            var boxWidth = $('#resizable').attr('width');
            alert("jQuery.UI.version = " + jQuery.ui.version + "  ---   Box Width: " + boxWidth);           
        });
  </script>


</head>
<body>
    <div id="resizable" class=">
        <div id="title">
            <h2>
            The expanding box
            </h2>
        </div>    
    </div>
</body>

As you can see, the problem is not with selecting the element (that works fine), it's about accessing the information (width) properly. Just wanted to point this out explicitly. — Felix Kling
– Felix Kling, Commented Apr 11, 2013 at 10:04

Jai · Accepted Answer · 2013-04-11 10:07:48Z

3

See here you don't have a attribute of width:

<div id="resizable" class=">

this will surely crash and set to undefined, var boxWidth = $('#resizable').attr('width');

There are two ways getting the width of an element like:

By the .width() way:

$('#resizable').width();

and by .css() way:

$('#resizable').css('width');

answered Apr 11, 2013 at 10:07

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bipen · Accepted Answer · 2013-04-11 10:17:47Z

3

your selector $('#resizable').attr('width'); search for attribute width in resizable which does not exists

i think you are asking for width()

try this

 var boxWidth = $('#resizable').width(); //this gives you the width of resizable div

updated seeing comment

your code reads the attribute width of div <div id="resizable" class="asd"> ..but see , there is no attribute called width in this div so it fails... doc to read more about attr()

your code will work if you add width in div like <div id="resizable" class="asd" width="30px">...this will give you 30px as alert...

edited Apr 11, 2013 at 10:17

answered Apr 11, 2013 at 10:01

bipen

36.6k9 gold badges51 silver badges62 bronze badges

3 Comments

Daarwin Over a year ago

Thanks! How come this works and my dont? I got my code from the jQuery site.

Felix Kling Over a year ago

@Lautaro: Your div element don't have a width attribute. Only id and class. Even if you would set a custom width attribute, it would just give you the value you set, not the actual width of the element.

bipen Over a year ago

@Lautaro i have explained it in my answer.....anyways your code reads the attribute width of div <div id="resizable" class="asd"> ..but see theres is no attributes called width in this div... your code will work if you add width in div like <div id="resizable" class="asd" width="30px">...this will give you alert as 30px

monxas · Accepted Answer · 2013-04-11 10:01:26Z

1

try this bit:

$('#resizable').width();

answered Apr 11, 2013 at 10:01

monxas

2,6573 gold badges26 silver badges42 bronze badges

Comments

cernunnos · Accepted Answer · 2013-04-11 10:02:17Z

1

You dont have a width attribute on that div, are you trying to get the width property of the div? try

$("#resizable").width();

answered Apr 11, 2013 at 10:02

cernunnos

2,7961 gold badge21 silver badges18 bronze badges

Comments

rahularyansharma · Accepted Answer · 2013-04-11 10:07:09Z

0

alert($('#resizable').width()); will you give 200

alert($('#resizable').css('width')); and this will you give 200px

div width

answered Apr 11, 2013 at 10:07

rahularyansharma

10.8k18 gold badges86 silver badges140 bronze badges

Comments

Ash · Accepted Answer · 2018-05-23 08:11:07Z

0

With Pure JavaScript you can do this in following way:

document.getElementById('resizable').clientWidth;

answered May 23, 2018 at 8:11

Ash

7328 silver badges21 bronze badges

Collectives™ on Stack Overflow

Get the width of a div when width set by css class

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related