如何检测元素是否具有"自动"高度

Question

两者window.getComputedStyle(element).height并element.clientHeight正在返回该元素的当前高度以像素为单位,而不管在CSS设置的值的.

有没有办法找出高度是否设置为auto或像素以外的其他单位？

---

@pvnarula通过他链接的页面建议的一个解决方案是暂时更改元素的内容,然后比较高度.有点hacky ......

Answer 1

更新：

\n\n

根据其他答案和大量在线研究，我想出了将所有内容混合在一个函数中。在这里查看 jsfiddle：\n https://jsfiddle.net/oriadam/d01ap7r6/3/

\n\n

// input a jQuery element\n// return true for elements with auto height (90-100% is considered auto as well)\n// return false for elements with fixed height\nfunction is_height_auto($e) {\n    var e = $e[0],\n        // check fixed style:\n        chk = function(value) {\n            return /\\d/.test(value) && !/^(100|9\\d)\\%/.test(value);\n        };\n\n    // start from the first, easiest, inline styles\n    if (chk(e.style.height)) {\n        // console.log(\'fixed for having style\', e.style.height)\n        return false;\n    }\n\n    // start from the first, easiest, inline styles\n    var overflow = getComputedStyle(e)[\'overflow\'];\n    if (overflow == \'scroll\' || overflow == \'auto\' || (e.tagName == \'BODY\' && overflow == \'visible\')) {\n        // console.log(\'auto for having overflow or is body\', getComputedStyle(e)[\'overflow\'], e.tagName);\n        return true;\n    }\n\n    // deprecated chrome way - check each rule that applies to the element\n    if (typeof getMatchedCSSRules == \'function\') {\n        var i, MatchedCSSRules = getMatchedCSSRules(e) || [];\n        for (i = MatchedCSSRules.length; i; i--) {\n            if (MatchedCSSRules[i - 1].style.height) {\n                // console.log(\'found height at MatchedCSSRules[\' + (i - 1) + \']: \', MatchedCSSRules[i - 1], \' All matches: \', MatchedCSSRules)\n                return !chk(MatchedCSSRules[i - 1].style.height);\n            }\n        }\n    }\n\n    // append something, see if height was changed, remove the something\n    var originalHeight = $e.height(),\n        $ghost = jQuery(\'<b style="display:block;height:1px;width:1px;padding:0;margin:0;">\').appendTo($e),\n        newHeight = $e.height();\n    $ghost.remove(); // cleanup\n    // console.log(\'Using a ghost got \',newHeight > originalHeight,\' originalHeight=\' + originalHeight + \' newHeight=\' + newHeight) \n    return newHeight > originalHeight;\n} //is_height_auto()\n

\n\n

**鬼元素方法解释（之前的答案）：**

\n\n

Greg Pettit在他的博客中有一个很好的答案，主要思想如下：

\n\n

\n

自动高度有什么独特之处？好吧，事实上它允许高度动态变化，当然！

\n

\n\n

\n
1. 克隆元素
\n
2. 将其置于可见性：隐藏和位置：绝对
\n
3. 删除其内容
\n
4. 查看高度是否改变（现在应该在 0\n左右）。
\n

5. 清理

   \n\n

   var isAutoHeight = function(element) {\n // 为我们所有的工作创建一个暂存区域。\n $(\'body\').append(\'\');

   \n\n

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

   \n\n

   };

\n

\n