Question

我正在使用javascript创建输入元素。在我的代码中，当我检查element.is(':visible')时，每次都会返回false。根据{{3}}，这可能是由于元素的高度和宽度在运行时为零而发生的。

因此，我尝试设置其高度和宽度。但是，我得到:visible的高度和宽度仍为零。

我必须对代码进行哪些更改，以使:visible变为true。有没有办法动态设置:visible为真？

Answer 1

您必须使用window.getComputedStyle(input)才能获得元素的高度。这是怎么回事。 element.is(':visible')不在您的代码中。

window.getComputedStyle()方法返回一个对象，该对象在应用活动的stylesheets并解析这些值可能包含的所有基本计算之后，报告元素的所有CSS属性的值。单个CSS属性值可通过对象提供的API或通过简单地使用CSS property名称索引来访问。 more from here

var input = document.createElement("input");
input.setAttribute("class", "custom-wrapper");
input.style.width = input.style.height = "20px";
input.setAttribute("height", 20);
input.setAttribute("width", 20);
input.value = "";
document.body.appendChild(input);
getHeight();// elemnt is visible
input.style.visibility = "hidden"; 
getHeight(); // element is hidden now
input.style.visibility = "visible"; // Again make it visible
function getHeight(){
if(isVisible(input)){
alert(window.getComputedStyle(input).height);
}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';
}

Answer 2

您的代码按预期正常工作。我包含了一个测试代码

var input = document.createElement("input");
input.setAttribute("class", "custom-wrapper");
input.style.width = input.style.height = "20px";
input.setAttribute("height", 20);
input.setAttribute("width", 20);
input.value = "";
document.body.appendChild(input);

//test code (is appended element visible)
if ($("input:visible"))
  alert(input.style.height);

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

动态创建高度和宽度的输入

2 个答案: