通過屬性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

您可以設置使用jQuery元素的高度以下，

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

Answer 3

在普通的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()。