Ben Ben - 2 months ago 7
Javascript Question

How to increase Googles polyfill dialog height dynamically

I use Googles polyfill dialog and want to increase it's height dynamically depending if a user clicks a dialog button to add more elements (rows) in it.
This is part the javascript which is called when the user cklicks that button :

var mc_dialog = document.getElementById('mc_dialog');
var h = mc_dialog.style.height;
console.log("mc_dialog height = ",h);


but
height
is simple empty, no value - nothing

While
mc_dialog.style.height = "500px"
works perfect.

Why do I not get the value of
mc_dialog.style.height
?

EDIT :

Ok after the answer of Evil Penguin I set the height
initially
in the javascript function, which opens the dialog, like this :

mc_dialog.style.height = "500px"


and later when the user clicks to add content to the dialog I can retrieve the height now, so it look like this now :

var mc_dialog = document.getElementById('mc_dialog');
var h = parseInt(mc_dialog.style.height);
mc_dialog.style.height= h+50+"px";


and it works perfect.

But now I have the question why do I have to set the style.height initially ? Isn't it a permanent attribute of that element ? And if not, why ?

Answer

Here is similar question.

.style.height only works if you have set the property in the first place.

EDIT:

Here is reference of HTMLElement.style property. It says:

The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute.

So as i understand it, if there is no style="smth" in the element's inline declaration, HTMLElement.style.smth doesn't work.

Comments