javascript - 无法通过 jQuery 获取 Div 宽度

Question

我有几个子 Div 的 HTML Div。当我试图获取主 Div 的宽度时，它的宽度与检查元素中显示的宽度不同。我真正想要的是可见宽度，即检查元素时显示的宽度。我尝试过outerWidth()但offsetWidth没有奏效。offsetWidth给了我“未定义”。我怎样才能得到这个？

var x = $(".main").width();

$("button").on("click", function() {
	alert(x + " (Inspect element has width 571)");
});

.main{
  display: flex;
  overflow: hidden;
}

.sub{
  padding: 10px;
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: #faa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">One</div>
  <div class="sub">Two</div>
  <div class="sub">Three</div>
  <div class="sub">Four</div>
</div>
<button>
GET MAIN DIV WIDTH
</button>

标签： javascriptjqueryhtmlcss

Answer 1

采用inline Flex

var x = $(".main").width();

$("button").on("click", function() {
	alert(x);
});

.main{
  display: inline-flex;
  overflow: hidden;
}

.sub{
  padding: 10px;
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: #faa;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">One</div>
  <div class="sub">Two</div>
  <div class="sub">Three</div>
  <div class="sub">Four</div>
</div>
<button>
GET MAIN DIV WIDTH
</button>