Cách phát hiện xem phần tử có chiều cao 'tự động' là

Question

Cả hai window.getComputedStyle(element).height và element.clientHeight đều trả lại chiều cao hiện tại của phần tử theo pixel, bất kể giá trị được đặt trong CSS.

Có cách nào để tìm hiểu xem chiều cao đã được đặt thành auto hoặc các đơn vị khác so với pixel không?

---

Một giải pháp mà @pvnarula đề xuất thông qua trang mà anh ấy liên kết là tạm thời change the contents of the element, then compare heights. Một chút hacky ...

Answer 1

Cập nhật:

Dựa trên câu trả lời khác và rất nhiều nghiên cứu trực tuyến tôi đã đưa ra một kết hợp của tất cả mọi thứ trong một chức năng duy nhất. Kiểm tra các jsfiddle đây: https://jsfiddle.net/oriadam/d01ap7r6/3/

// input a jQuery element 
// return true for elements with auto height (90-100% is considered auto as well) 
// return false for elements with fixed height 
function is_height_auto($e) { 
    var e = $e[0], 
     // check fixed style: 
     chk = function(value) { 
      return /\d/.test(value) && !/^(100|9\d)\%/.test(value); 
     }; 

    // start from the first, easiest, inline styles 
    if (chk(e.style.height)) { 
     // console.log('fixed for having style', e.style.height) 
     return false; 
    } 

    // start from the first, easiest, inline styles 
    var overflow = getComputedStyle(e)['overflow']; 
    if (overflow == 'scroll' || overflow == 'auto' || (e.tagName == 'BODY' && overflow == 'visible')) { 
     // console.log('auto for having overflow or is body', getComputedStyle(e)['overflow'], e.tagName); 
     return true; 
    } 

    // deprecated chrome way - check each rule that applies to the element 
    if (typeof getMatchedCSSRules == 'function') { 
     var i, MatchedCSSRules = getMatchedCSSRules(e) || []; 
     for (i = MatchedCSSRules.length; i; i--) { 
      if (MatchedCSSRules[i - 1].style.height) { 
       // console.log('found height at MatchedCSSRules[' + (i - 1) + ']: ', MatchedCSSRules[i - 1], ' All matches: ', MatchedCSSRules) 
       return !chk(MatchedCSSRules[i - 1].style.height); 
      } 
     } 
    } 

    // append something, see if height was changed, remove the something 
    var originalHeight = $e.height(), 
     $ghost = jQuery('<b style="display:block;height:1px;width:1px;padding:0;margin:0;">').appendTo($e), 
     newHeight = $e.height(); 
    $ghost.remove(); // cleanup 
    // console.log('Using a ghost got ',newHeight > originalHeight,' originalHeight=' + originalHeight + ' newHeight=' + newHeight) 
    return newHeight > originalHeight; 
} //is_height_auto() 

** phương pháp phần tử ma giải thích (câu trả lời trước): **

Greg Pettit đã có một câu trả lời khá tốt in his blog, đây là ý tưởng chính:

Điều gì độc đáo về việc có chiều cao tự động? Vâng, thực tế là nó cho phép chiều cao thay đổi tự động, tất nhiên!

1. Clone yếu tố
2. Đặt nó trong visibility: hidden và position: absolute
3. Di chuyển nội dung của nó
4. Xem nếu chiều cao thay đổi (nó sẽ vào khoảng 0 bây giờ).

5. Cleanup

   var isAutoHeight = function (element) {// tạo ra một khu vực dàn dựng cho tất cả các công việc của chúng tôi. $ ('body'). Chắp thêm ('');

   // assume false by default 
   var autoHeight = false; 
   
   // clone the div and move it; get its height 
   var clone = element.clone(); 
   clone.appendTo('#stage'); 
   var initialHeight = clone.height(); 
   
   // destroy all the content and compare height 
   clone.html(''); 
   var currentHeight = clone.height(); 
   if (currentHeight < initialHeight) { 
       autoHeight = true; 
   } 
   
   // get that clone and its smelly duplicate ID out of the DOM! 
   clone.remove(); 
   // do the same for the stage 
   $('#stage').remove(); 
   
   return autoHeight; 
   

   };

Answer 2

Vui lòng thử:

document.getElementById("ele_id").style.height 

Ngoài ra kiểm tra các plugin sau:

http://gregpettit.ca/2012/jquery-check-if-element-has-auto-widthheight/