CODEWITHSUNDEEP
javascriptjquerycss
user3095198
user3095198

Reputation: 83

Get css height in javascript

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!

Upvotes: 0

Views: 257

Answers (4)

mehulmpt
mehulmpt

Reputation: 16597

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

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

Upvotes: 1

PPrasai
PPrasai

Reputation: 1186

try this:

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

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

Upvotes: 2

Shakesy
Shakesy

Reputation: 335

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

Upvotes: 1

Oliver Schaub
Oliver Schaub

Reputation: 71

Shouldn't it be

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

instead of "width"?

Upvotes: 1

Related Questions