Question

我有以下html：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .item {
          width: 500px;
          min-width: 500px;
          background-color: brown;
          padding: 10px;
          border: 5px solid white;
          display: inline-block;
        }
        .wrapper {
          width:100%;
          overflow-y:scroll;
          white-space:nowrap;
        }
    </style>
</head>
<body>
    <div class="wrapper">
      <div id="me">
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
      </div>
    </div>
</body>
</html>

如果我尝试以下方法：

>screen.width
1440
>document.getElementById("me").getBoundingClientRect();
bottom: 56, height: 48, left: 8, right: 1415, top: 8, width: 1407

我希望宽度至少为2000（4X500）加上填充等等。

相反，它给了我屏幕宽度。我会填补＆＃34; me＆＃34;元素具有可变数量的元素，必须水平滚动并需要元素的宽度。

由于内容是可变的，我无法将其设置为固定，而是希望使用容器的100％屏幕宽度并计算内容的宽度（自定义滚动条所需）。

感谢您抽出宝贵时间阅读此问题。

[更新]

至于阿尔瓦罗的优秀答案;这是我打算使用的代码示例（抱歉jQuery）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style>
        .item {
          width: 470px;
          min-width: 470px;
          background-color: brown;
          padding: 10px;
          border: 5px solid white;
          display: table-cell;
        }
        .wrapper {
          width:100%;
          overflow-y:scroll;
          white-space:nowrap;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
    $(document).ready(function(){
        function addItem(){
          $("#me").append('<div class="item">..</div>');
          var box = $("#me")[0].getBoundingClientRect();
          output(box);
        }
        function removeItem(){
          $("#me .item").eq(0).remove();
          var box = $("#me")[0].getBoundingClientRect();
          output(box);
        }
        function output(box){
          console.log("width is:",(box.left-box.right)*-1);
          $("#output").html("width is:"+(box.left-box.right)*-1);
        }
        $("#ADD").on("click",addItem);
        $("#REMOVE").on("click",removeItem);
    })
    </script>
</head>
<body>
    <div class="wrapper">
      <div id="me" style="float:left">
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
        <div class="item">..</div>
      </div>
    </div>
    <div id="output"></div>
    <input type="button" id="ADD" value="ADD" />
    <input type="button" id="REMOVE" value="REMOVE" />
</body>
</html>

Answer 1

如果你添加：

#me {float:left;}

javascript可以为您提供窗口宽度的正确宽度。

我使用此jquery测试了它：

var meWidth = $('#me').outerWidth(true );
$('.test').css({
    'width': meWidth + 'px'
});

将宽度获取添加到div我称为.test

<强> JSFIDDLE

注意：outerWidth(true )计算宽度+填充+边框+边距。在您的示例中：2132px。

如何使用溢出滚动获取元素内部的html元素的宽度

1 个答案: