

htmlの高さが決まっていない(可変)要素の高さを取得したいのですが、取得方法が分かりません。  
以下のリンクを参考にしてスライドショーを作りました。  
<https://allabout.co.jp/gm/gc/417216/>  
現状ではスライドショーの下に他の要素が入り込んでしまいます。  
ご教示いただければ幸いです。

[code]

    function slideSwitch() {
      var $active = $('#slideshow img.active');
    
      if ( $active.length == 0 ) $active = $('#slideshow img:last');
    
      var $next =  $active.next().length ? $active.next()
        : $('#slideshow img:first');
    
      $active.addClass('last-active');
    
      $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
          $active.removeClass('active last-active');
        });
    }
    
    $(function() {
      setInterval( "slideSwitch()", 3000 );
    });
[/code]

[code]

    .container{
      width: 100%;
      margin: 0 auto;
    }
    
    
    #slideshow {
      margin: auto;
      vertical-align:middle;
      position: relative;
      top:0;
    }
    
    #slideshow img {
      width: 100%;
      position: absolute;
      top: 0;
      left:0;
      z-index: 9;
      opacity: 0.0;
    }
    
    #slideshow img.active {
      z-index: 10;
      opacity: 1.0;
    }
    
    #slideshow img.last-active {
      z-index: 9;
    }
    
    /*----------top----------*/
    .top-bk-img {
      background-image:url("../images/webbase03-04-0609.png");
      background-size: cover;
      padding-bottom: 5%;
    }
[/code]

[code]

    <div id="top" class="container">
      <div id="slideshow">
      <img src="images/web-base01.png" alt="画像1" class="active">
      <img src="images/web-base02.png" alt="画像2">
    </div>
    </div>
    
    <div class="top-bk-img"> </div>
[/code]


CC BY-SA 4.0
2020-06-12T16:53:26.893
67601
2020-06-12T17:37:31.300
40622
question
javascript html css
imgの高さを取得したい


element.style.heightでページロード時に取得することができました。  
もう解決済みです。


CC BY-SA 4.0
2020-06-12T17:37:31.300
67602
2020-06-12T17:37:31.300
40622
67601
answer