Get css height in javascript

Question

I'm facing a rather stupid problem. I'm having some divs, with different css attributes for height, defined in different css classes(height1, height2 etc.) For another function I need to get this heights as integers in a JS variable, but whenever I try to, I'm getting a null, or unknown and the console says "Unknown property 'box-sizing'. Declaration dropped." (box1, box2 etc are the ids of the divs). I tried with the .css function, I tried with the .width() function and the style.height and I don't know what else, nothing seems to work.

.dragableBox{
        width:170px;
        border:1px solid #000;
        background-color:#FFF;      
        margin-bottom:5px;
        padding:10px;
        font-weight:bold;
        text-align:center;

 .hoehe1{
            height:40px;
        }
        .hoehe2{
            height:20px;
        }
        .hoehe3{
            height:70px;
        }
        .hoehe4{
            height:10px;
        }
        .hoehe5{
            height:15px;
        }
        .hoehe6{
            height:20px;
        }
        .hoehe7{
            height:25px;
        }

<div class="dragableBox hoehe1" id="box1">Box1</div>
                <div class="dragableBox hoehe2" id="box2">Box2</div>
                <div class="dragableBox hoehe3" id="box3">Box3</div>
                <div class="dragableBox hoehe4" id="box4">Box4</div>
                <div class="dragableBox hoehe5" id="box5">Box5</div> 
                <div class="dragableBox hoehe6" id="box6">Box6</div>
                <div class="dragableBox hoehe7" id="box7">Box7</div>
                <div class="dragableBox hoehe4" id="box8">Box8</div>

This is the last I tried, that gives a null.

var divAWidthNumber = $('#box1').width();

I'm sure there is a reason, why I can't get it right, but I can't seem to find it. (.css file is external, but shouldn't be a problem, should it?)

Thanks in advance. Best Regards.

EDIT: SORRY, I FOUND THE MISTAKE, IT WAS A PRETTY STUPID AND SMALL TO FIND. THANKS YOU ALL ANYWAYS!

Are you sure you've referenced jQuery/there are no other errors? Because your code works fine: jsfiddle.net/3M6hG - Also you might want to check this: stackoverflow.com/questions/15306923/… — CodingIntrigue
– CodingIntrigue, Commented Apr 30, 2014 at 11:31
Check if the dragableBox close bracket is there. In your posted code it isn't — Alexandru Chichinete
– Alexandru Chichinete, Commented Apr 30, 2014 at 11:32
When/where/how are you calling var divAWidthNumber = $('#box1').width(); ? — A. Wolff
– A. Wolff, Commented Apr 30, 2014 at 11:32
the bracket is closed, I have jquery 1.10.1 and at first I would like to see the alert('height' + divAWidthNumber); — user3095198
– user3095198, Commented Apr 30, 2014 at 11:36

PPrasai · Accepted Answer · 2014-04-30 11:38:44Z

2

try this:

var divAWidthNumber = $( '#box1' ).css( "width" );

or, maybe its the browser issue? your code works just fine on jsfiddle...

edited Apr 30, 2014 at 11:38

answered Apr 30, 2014 at 11:33

PPrasai

1,18613 silver badges36 bronze badges

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

Comments

Oliver Schaub · Accepted Answer · 2014-04-30 11:35:36Z

1

Shouldn't it be

var divAWidthNumber = $('#box1').height();

instead of "width"?

answered Apr 30, 2014 at 11:35

Oliver Schaub

714 bronze badges

1 Comment

user3095198 Over a year ago

yeah, it should :D. I was just frustrated and wrote width instead of height :D

Shakesy · Accepted Answer · 2014-04-30 11:35:53Z

1

Try var divAWidthNumber = $('#box1').css('width');

answered Apr 30, 2014 at 11:35

Shakesy

3352 silver badges8 bronze badges

Comments

mehulmpt · Accepted Answer · 2014-04-30 11:39:14Z

1

To get complete height of element including padding and margins, use this:

var divAWidthNumber = $('#box1').outerHeight();

answered Apr 30, 2014 at 11:39

mehulmpt

16.7k13 gold badges54 silver badges90 bronze badges

1 Comment

Klaas Leussink Over a year ago

To get the padding and margins, you should explicitly set a boolean: outerHeight(true)

Collectives™ on Stack Overflow

Get css height in javascript

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related