獲取幻燈片Boostrap Carousel中的高度和寬度特定Div

使用Boostrap Carousel的iam。獲取幻燈片Boostrap Carousel中的高度和寬度特定Div

我想刷新頁面時，或者我點擊按鈕我得到父母身高&寬度div。

例如

我希望得到家長的高度和寬度的div在ID 「data_3」

我已經得到家長的高度和寬度的div在ID 「data_3」時顯示幻燈片3，但是當幻燈片1或幻燈片2或其他幻燈片我再次點擊按鈕，我無法獲得父母的高度和寬度div在ID「data_3」。

我想獲得其他幻燈片旋轉木馬（不僅幻燈片3）ID爲「data_3」父母的高度和寬度div 我很困惑，以解決這個問題。

這是我的代碼in Jsfiddle

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"> 
    <style type="text/css"> 
     .carousel { 
     height: 500px; 
     margin-bottom: 60px; 
     } 
     /* Since positioning the image, we need to help out the caption */ 
     .carousel-caption { 
      z-index: 10; 
     } 
     /* Declare heights because of positioning of img element */ 
     .carousel .item { 
      width: 100%; 
      height: 500px; 
      background-color: #777; 
     } 
     .carousel-inner > .item > img { 
      position: absolute; 
      top: 0; 
      left: 0; 
      min-width: 100%; 
      height: 500px; 
     } 
     @media (min-width: 768px) { 
      .carousel-caption p { 
       margin-bottom: 20px; 
       font-size: 21px; 
       line-height: 1.4; 
      } 
     } 
    </style> 
    <script type='text/javascript'> 
     $(window).load(function(){ 
      $("#carousel").carousel(); 
      $(".carousel-indicators").hide(); 
      $("#btn").click(function(){ 
       var width_div_parent = $('#data_3').closest('.box').width(); 
       var height_div_parent = $('#data_3').closest('.box').height(); 
       $("#result").html("Height : "+height_div_parent+" & Width : "+width_div_parent); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <center><button type="button" id="btn">Get Height & Width Div in Box 3</button><br/> 
<div id="result"></div></center> 
<div data-interval="2000" id="carousel" class="carousel slide" data-ride="carousel"> 
    <!-- Menu --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel" data-slide-to="1"></li> 
     <li data-target="#carousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Items --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="box"> 
       <input type="hidden" name="data" id="data_1" value="1"> 
       <h2 style="text-align:center">Box 1</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="box" > 
       <input type="hidden" name="data" id="data_2" value="2"> 
       <h2 style="text-align:center">Box 2</h2> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="box" > 
       <input type="hidden" name="data" id="data_3" value="3"> 
       <h2 style="text-align:center">Box 3</h2> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2017-02-10 Muhamad Ridwansyah

你的盒子類沒有默認的高度或寬度。這意味着返回的值是auto（參考window.getComputedStyle）。對於更多的細節，你可以看看[這個答案]（http://stackoverflow.com/questions/26955772/javascript-window-getcomputedstyle-returns-auto-as-element-top-and-left-prop） – gaetanoM

你可以隨時找活動項目在轉盤中，當您單擊該按鈕，並得到其高度和寬度。

嘗試在你的點擊功能這些行：

var width_div_parent = $('#data_3').closest('.box').parent().parent().find('div.item.active .box').width(); 
    var height_div_parent = $('#data_3').closest('.box').parent().parent().find('div.item.active .box').height(); 

    $("#result").html("Height : "+height_div_parent+" & Width : "+width_div_parent);

來源

2017-02-10 21:38:27 Shashank

謝謝兄弟。是工作。 –

獲取幻燈片Boostrap Carousel中的高度和寬度特定Div

回答

相關問題