높이를 자동으로 설정하지 않고 요소의 자동 높이 가져 오기

Question

실제로 요소 높이를 auto로 설정하지 않고 해당 요소가 현재 height:auto;으로 설정된 경우 요소의 높이를 가져오고 싶습니다.

꽤 똑바로지만, 먼저 auto로 요소의 높이를 설정하지 않고 자동 높이 값을 얻는 방법을 알아낼 수 없습니다. 그것이 내가 피하려고하는 부분입니다.

누구든지이 작업을 수행 할 수 있습니다.

---

이 jsfiddle은 내 문제를 설명합니다.

3 개의 머리글을 모두 같은 높이로 설정하려고합니다. 창 크기를 조정할 때 높이를 조정해야합니다. 현재 스크립트에서는 높이가 먼저 auto로 설정되어 높이가 조금씩 증가합니다. 나는이 점프를 피하려고 노력하고있다.

---

내가 말하는 겁니다 점프 명확히하려고합니다 - 당신은 창 크기를 조정하면, 제목 높이가 변경하는 경우, 새로운 높이로 애니메이션이 시작됩니다. 그러나 애니메이션이 시작되기 전에 애니메이션이 항상 '자동'높이로 재설정됩니다.

크기를 조정할 다시 모든 요소가 초기화하면 -

가

1. 자동 높이가 모든 요소가 새로운 높이 자동 높이 (20 픽셀)에서 애니메이션을 크기 조절에 20 픽셀
2. (40px 예) = 그래서 예를 들면

   자동 높이 (20px) 그런 다음 다른 높이 (즉, - 60px)로 애니메이션하십시오.

따라서 2 ~ 3 단계를 고려하면 현재 높이 (40 픽셀)에서 애니메이션을 시작하고 새로운 가재 도구 새 높이 (60px)로 애니메이션을 적용하기 전에 자동 높이 (20px)로 재설정하는 대신 ht (60px)를 사용하십시오.

는 희망이

Answer 1

당신은 요소의 scrollHeight을 선택적으로 박스 크기 특성에 따라 상단 및 하단 여백 및 테두리를 추가 할 수 있습니다 .. 더욱 도움이됩니다.

브라우저마다 약간의 불일치가있을 수 있지만 (https://stackoverflow.com/a/15033226/1669279 참조) 실제로 높이 속성을 변경하지 않으려는 경우에만 가능합니다.

아, 다른 하나의 생각 : 당신이 auto에 부모의 height을 설정하고 auto에 계산 된 값을 설정하는 몇 가지 % 값으로 요소의 height을 설정할 수 있습니다. 문자 그대로 height을 auto으로 설정하지 않아도 문제의 정신에 해당하는지 확실하지 않습니다.

내 (첫번째)의 제안에 따라 JsFiddle에서 다음과 같이 변경할 수 있습니다

heading.each(function() { 
    var computedStyle = window.getComputedStyle(this); 
    var height = this.scrollHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) - parseInt(computedStyle.borderTop) - parseInt(computedStyle.borderBottom); 
    if (height > h) { 
     h_elem = this; 
     h = height; 
    } 
}); 

Answer 2

의 "주위에 뛰어 높이를 일으키는 원인이되는 높이가 먼저 자동으로 설정되어 현재 스크립트, 함께 나는이 점프를 피하려고 노력하고있다.당신이 .stop없이 높이 애니메이션()하지만 여기에 Fiddle, 그리고 당신이 변화를 볼 수 있습니다 울부 짖는 소리 어쩌면 때문에, "주변의 높이 점프를"당신이 말할 때

---

이해가 안 당신이 무엇을 의미합니까 ". 즉, 크롬 보이는 최신에서 얘기하고있는 점프 ...

heading.stop().animate({height:h+"px"},200); // Animate with .stop() 

// or 

heading.css({height:h+"px"},200); // Change height with CSS 

이 있다면 좋은.