javascript - 为什么打印时我的 clientWidth 会改变？

Question

我试图使用以下代码获取 angularJs 中“th”元素的 clientWidth:

var cols = this._element.find("th");

angular.forEach(cols, function(col) {
    var th = angular.element(col);
    console.log(th);
    console.log(th[0].clientWidth);
    th.css('width', th[0].clientWidth + "px");
});

当我打印元素(第一次打印)时，我得到以下内容:

[th]
  0: th.ng-hide
    abbr: ""
    ...
    clientWidth: 0

这正是我期望的值(因为它是隐藏元素)。但是，当我尝试使用以下方式访问 clientWidth 时:

th[0].clientWidth

我得到的值为 12...

我已经尝试过使用许多元素(完整的表格和所有元素，隐藏和非隐藏)，并且所有元素似乎都在元素上具有适当的值，但是当我尝试时给我错误的值并访问它们。

clientWidth 和innerWidth 也始终相同。两者似乎都没有反射(reflect)我对该元素的看法。

有什么想法可以解释为什么会这样吗？

Answer 1

使用Jquery，如果我打印出隐藏元素的clientWidth，我得到的clientWidth为0，而我得到的 innerWidth 作为元素的实际内部宽度，这就是您想要的吗？

<小时/>

片段:

$(document).ready(function() {
  $('.hide').css('display', 'none');
  var temp = "<br>innerWidth:" + $('.hide').innerWidth();
  temp += "<br>clientWidth(from [th] object):" + $('.hide')[0].clientWidth;
  var obj = new Object($('.hide'));
  $('#show').html(temp);
  console.log($('.hide').innerWidth());
  console.log($('.hide')[0].clientWidth);
  console.log($('.hide'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <th>Heading Shown</th>
  <th class='hide'>Heading Hidden</th>
</table>
<div id="show">
</div>

希望这有帮助。