從隱藏元素獲取寬度大小

Question

我有一個小問題，請幫我解決這個問題，在這里找到我所缺少的。
我的html代碼是：

<div class="drop-down-menu">
  <div class="innerdrop-down-menu">
    <div id="first-tab-cont">
      <ul id="slider">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
       </ul>
       <a href="javascript:;" id="back">&lArr;</a>
       <a href="javascript:;" id="forward">&rArr;</a>
     </div>
  </div>
</div>

CSS代碼：

.drop-down-menu{ display:none; position:relative; background-color:#FFFFFF; width:100%; height:280px; z-index:2; }
#first-tab-cont{ background-color:#CCC; display:none; width:960px; height:240px; padding:20px; }
#slider{ background-color:#C9F; position:relative; min-width:100%; width:auto; height:240px; font-family: HelveticaNeue; white-space:nowrap; }
#slider li{ background-color:#C03; display:inline-block; margin-right:15px; white-space:nowrap; width:300px; height:240px; }

當前的jQuery代碼是：

var Min = 0;
var Max = $("#fifth-tab-cont #slider").width();
var Step = 300;

$("#first-tab-cont #back").click(function(){
    if($("#first-tab-cont #slider").position().left <= Min + Step) {
        $("#first-tab-cont #slider").animate({left: '+=300px'}, Step );
    }
});
$("#first-tab-cont #forward").click(function(){
    if($("#first-tab-cont #slider").position().left >= Max + Step) {
        $("#first-tab-cont #slider").animate({left: '-=300px'}, Step );
    }
});

我的問題是如何獲取slider寬度大小，以便只能向左滾動直到其尺寸？

Answer 1

可以使它顯示（ display: block ），但使其透明（ opacity: 0 ）。 或顯示它，獲取尺寸，然后將其隱藏。

var Min = 0,
    $dropDownMenu = $('.drop-down-menu').show(),
    $slider = $("#slider");
    Max = $slider.width(),
    Step = 300;

$dropDownMenu.hide();

$("#back").click(function(){
    if($slider.position().left <= Min + Step) {
        $slider.animate({left: '+=300px'}, Step );
    }
});
$("#forward").click(function(){
    if($slider.position().left >= Max + Step) {
        $slider.animate({left: '-=300px'}, Step );
    }
});

Answer 2

如果您可以將整個塊放置在屏幕外，則可以獲取元素的大小，因為您無法訪問隱藏的元素。

您可以使用position:absolute並遠離視口

Answer 3

我在小提琴中嘗試過它，並共享了一個鏈接，該鏈接獲取滑塊寬度作為隱藏元素。 我們可以簡單地使用css屬性來做到這一點

visibility:hidden;

而不是使用display:none; 我們可以使用visibility:hidden; 這使jquery像元素一樣思考，但實際上它是隱藏的，它將傳遞給我們寬度。

我已發出警告以顯示#slider寬度，請檢查一下。

http://jsfiddle.net/fzd10zak/2/

Answer 4

用這個

$(".yourSlider").get(0).scrollWidth

而不是display:none使用width:0px jQuery函數將返回元素的實際非隱藏寬度，因為DOM存儲了滾動寬度。