Question

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

Answer 1

在这里，您可以通过使用getComputedStyle获取可见元素的高度。

window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解决所有可能包含该值的基本计算之后，报告该元素的所有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>

Answer 2

您是否正在寻找窗高？如果可以的话，您可以使用

$(window).height();

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

2 个答案: