속성을 통해 요소의 높이를 감지합니다.

Question

속성이 인 div입니다. 이 속성에 내 요소의 높이를 동적으로 줄 수 있습니까? 예를 들어 :

HTML

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

OUTPUT

<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>

다음과 같은 16,

Answer 2

당신은 일반 자바 스크립트에서

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

Answer 3

을 jQuery를 사용하여 요소의 높이를 설정할 수 있습니다

[].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().