博客

如何在jQuery中获得隐藏元素的宽度

  • Post category:jquery

若要获得隐藏元素的宽度，可以通过jQuery的方法 outerWidth() 来获取元素的外部宽度（包括padding和border，不包括margin）。但是如果元素被隐藏了， outerWidth() 会返回0，这不会给我们带来任何帮助。在这种情况下，可以考虑使用一种叫做“离屏渲染”的技术，通过设置元素的位置来计算宽度。

以下是一些步骤来讲解如何在jQuery中获得隐藏元素的宽度：

步骤一：将元素放到屏幕外

首先，将元素移到屏幕左侧以外。使用以下CSS代码：

position: absolute;
left: -9999px;

此时元素仍然没被显示出来，但是它仍然存在，并且在文档中仍然有位置信息。

步骤二：获取元素的宽度

使用 jQuery 的 outerWidth() 方法获取宽度。因为元素不在文档流中，不会影响布局，所以获取的宽度仍然是正确的。

var width = $('#hidden-element').outerWidth();

此时变量 width 将会保存隐藏元素的宽度。

示例一：获取被隐藏的元素宽度

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>获取被隐藏的元素宽度</title>
  <style>
    #hidden-element {
      display: none;
    }

    #visible-element {
      background-color: red;
      width: 100px;
      height: 100px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 将hidden-element设置为left:-9999px
      $('#hidden-element').css({
        'position': 'absolute',
        'left': '-9999px'
      });

      // 获取hidden-element的宽度
      var width = $('#hidden-element').outerWidth();

      // 显示hidden-element的宽度
      $('#hidden-width').html(width);
    });
  </script>
</head>

<body>
  <div id="hidden-element">隐藏的元素</div>
  <div id="visible-element">可见元素</div>
  <p>被隐藏的元素宽度：<span id="hidden-width"></span></p>
</body>

</html>

在上述示例中，一个具有 display: none; 样式的div元素被隐藏了，我们想要获取它的宽度。首先，我们将div元素的位置移到屏幕左侧以外。接下来我们使用 outerWidth() 方法获取它的宽度，最后将它显示在文档中对用户进行展示。

示例二：根据窗口大小更新被隐藏元素的宽度

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>根据窗口大小更新被隐藏元素的宽度</title>
  <style>
    #hidden-element {
      display: none;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      function updateWidth() {
        // 将hidden-element设置为left:-9999px
        $('#hidden-element').css({
          'position': 'absolute',
          'left': '-9999px'
        });

        // 获取hidden-element的宽度
        var width = $('#hidden-element').outerWidth();

        // 将hidden-element的宽度更新到文本框中
        $('#hidden-width').val(width);
      }

      // 当窗口的大小改变时更新hidden-element的宽度
      $(window).resize(updateWidth);

      // 初始化hidden-element的宽度
      updateWidth();
    });
  </script>
</head>

<body>
  <div id="hidden-element">隐藏的元素</div>
  <p>被隐藏的元素宽度：<input type="text" id="hidden-width"></p>
</body>

</html>

在示例中，我们想要根据窗口大小的变化来更新一个隐藏元素的宽度。首先，我们定义了一个 updateWidth() 函数来获取被隐藏元素的宽度，并将它的值更新到文本框中。接着我们将该函数绑定在窗口的 resize 事件上，并在初始化时调用该函数以确保它的值是正确的。

Tags: