clientHeight returns zero

12,360

Solution 1

Elements styled with display:none will register 0 for its dimensions. Try applying this instead:

div.myClass { position:absolute; left:-999em; }

Same effect, but your div will still have its dimensions.

Solution 2

You need to append in order to know the width... you can use the opacity to hide the content to your needs.

Example

CSS

.hidden {opacity: 0;}

or you can use Chis Hardie displacement solution.

Share:
12,360

Related videos on Youtube

dittops
Author by

dittops

Updated on November 03, 2022

Comments

  • dittops
    dittops over 1 year

    I'm creating the DOM elements dynamically using JavaScript. I need to get height of one div to do the slide down animation. But when i use clientHeight its always returning a 0. offsetHeight also do the same. I'm getting the div when i tried console.log(). So its not because the element is not loaded in DOM. Initially i set style display:none for the div to hide it. Is this the reason for the problem? Please someone help me.

    document.getElementsByClassName('myDiv')[0].parentNode.children[1].clientHeight;
    

    I tried the below code to avoid the problem of display:none. Still clientHeight returns 0.

    if(obj.style.display == "none"){ // if it's allready hidden we slide it down
       obj.style.visibility = "hidden";
       obj.style.display = "block";
       height = obj.offsetHeight;
       obj.style.visibility = "visible";
       slideDown(obj,0,height,Math.ceil(height/timeToSlide));
    } 
    
  • dittops
    dittops about 10 years
    I want this without any library.

Related