获取幻灯片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

回答

相关问题