正在从隐藏元素获取宽度大小

Getting width size from a hidden element

本文关键字：取宽度 获取 元素 隐藏      更新时间：2023-09-26

我有一个小问题，请帮我解决，找到我缺少的东西
我的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的宽度大小，这样我就只能向左滚动到他的尺寸？

我在fiddle中尝试过，并共享了一个链接，将滑块宽度作为隐藏元素。我们可以简单地使用css属性

visibility:hidden;

我们可以使用visibility:hidden;，而不是使用display:none;，这使得jquery认为元素在那里，但实际上它是隐藏的，它会传递给我们宽度。

我已经发出警报显示#slider宽度，请检查。

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

使用此

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

并且使用CCD_ 6而不是CCD_jQuery函数将返回元素的实际非隐藏宽度，因为DOM存储滚动宽度。

如果您可以将整个块放置在屏幕之外，则可以为无法访问的隐藏元素获取元素的大小。

您可以使用position:absolute并远离查看端口

可以使其显示（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 );
    }
});
相关文章：