JavaScript: not able to alert output value

Question

The code is pretty simple.

HTML:

<div class="simpleDiv" id="Child1" onmouseover="expandDiv(this);"></div>

CSS:

.simpleDiv {
    background-color: red; 
    width: 100px; 
    height: 50px; 
    margin: 5px; 
    margin-left: 50px; 
    opacity: 1;
}

JavaScript:

function expandDiv(object){
    alert(document.getElementById(object.id).style.height);
}

Why am I not able to alert the height of the div like this? If I alert the id or class using the function hasAttribute, thats working fine but not able to alert the css properties of the elements.

Any help appreciated!

Niet the Dark Absol · Accepted Answer · 2013-03-20 14:17:05Z

6

Why not just alert(object.style.height)?

Anyway, the reason it doesn't work is because elem.style.property only works with inline style="..." attributes. To take into account all styles, you need this:

alert(window.getComputedStyle(object).height)

Older versions of IE don't support this, but it's a very easy shim:

window.getComputedStyle = window.getComputedStyle || function(e) {return e.currentStyle;};

answered Mar 20, 2013 at 14:17

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

Navneet Saini Over a year ago

Even if I try alert(object.style.height) , it doesn't work! Does it? Thanks for the answer, by the way. the second one works!

user2188149 · Accepted Answer · 2013-03-20 14:20:02Z

2

function expandDiv(object){



    alert(document.getElementById(object.id).innerHeight);

}

answered Mar 20, 2013 at 14:20

user2188149

Comments

mbochynski · Accepted Answer · 2013-03-20 14:18:16Z

1

try using:

alert(document.getElementById(object.id).offsetHeight);

Here is description: offsetHeight on MDN

answered Mar 20, 2013 at 14:18

mbochynski

7067 silver badges15 bronze badges

Comments

KdR135 · Accepted Answer · 2013-03-20 14:22:46Z

1

Use JQuery:

 alert($('#Child1').css("height");

Or to change the attribute, use:

$('#Child1').css("height", value )

Ignore if you don't want JQuery.

answered Mar 20, 2013 at 14:22

KdR135

113 bronze badges

Collectives™ on Stack Overflow

JavaScript: not able to alert output value

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related