javascript - 如何使用js或jquery找到整个html中仅可见元素的高度？

Question

我想使用 js 或 jquery 从 html 中查找仅可见元素的高度。 $(document).height() 测量整个 html 元素的高度，包括隐藏元素的高度。

Answer 1

以下是如何使用 getComputedStyle 获取可见元素的高度。

window.getCompulatedStyle() 方法返回一个对象，该对象在应用事件样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性值 访问各个 CSS 属性值通过对象提供的 API 或简单地使用 CSS 属性名称进行索引。

var input = document.createElement("input");
input.style.width = input.style.height = "20px";
input.setAttribute("height", 20);
input.setAttribute("width", 20);
document.body.appendChild(input);
getHeight();// elemnt is visible


input.style.visibility = "hidden"; 
getHeight(); // element is hidden now

function getHeight(){
if(isVisible(input)){
alert(window.getComputedStyle(input).height); // Javascript way
alert(input.style.height); // jquery way
}else{
 alert('your element is hidden');
}
}
  
// To check visibility of element.
function isVisible (ele) {
    var style = window.getComputedStyle(ele);
    return  style.width !== "0" &&
    style.height !== "0" &&
    style.opacity !== "0" &&
    style.display!=='none' &&
    style.visibility!== 'hidden';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>