通过属性javascript检测元素的高度

Question

我的div有一个属性。是否可以动态赋予此属性元素的高度？例如：

HTML

<div data-size="this.style.height"></div>

输出

<div data-size="400px"></div>

Answer 1

是的，选择具有data-size属性的所有元素，您可以这样做：

$(document).ready(function(){
  $('[data-size]').each(function(){
    $(this).attr('data-size', $(this).outerHeight() + "px");
  });
});

div {border: 1px solid #ccc;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div data-size="this.style.size">
  <div style="height: 300px;"></div>
</div>
<div data-size="this.style.size">
  <div style="height: 25px;"></div>
</div>
<div data-size="this.style.size">
  <div style="height: 50px;"></div>
</div>

Answer 2

在纯JavaScript中：

[].slice.call(document.querySelectorAll('[data-size]'), 0).forEach(function (elem) {
    elem.setAttribute('data-size', window.getComputedStyle(elem, null).height);
});

参考文献：

• Array.prototype.forEach()。
• Array.prototype.slice()。
• document.querySelectorAll()。
• Element.setAttribute()。
• Window.getComputedStyle()。

Answer 3

您可以使用jQuery设置元素的高度，如下所示

 $(document).ready(function(){
      $('[data-size]').each(function(){
          $(this).height($(this).attr("data-size"));
      });
 });