Динамическое создание ввода с высотой и шириной

Я создаю элемент ввода с помощью javascript. В моем коде, когда я проверяю element.is(':visible'), он каждый раз возвращает false. Согласно эта ссылка, возможно, это происходит из-за того, что высота и ширина элемента равны нулю во время выполнения.

Итак, я попытался установить его высоту и ширину. Но все же я получаю :visible, а высота и ширина по-прежнему равны нулю.

Вот мой код

Какие изменения я должен внести в свой код, чтобы :visible стал true. Есть ли способ динамически установить значение :visible true?

А что насчет другого: Set to display:none, Form elements with type="hidden", Width and height set to 0, A hidden parent element (this also hides child elements)?

Simon Jensen 10.09.2018 07:50

@sonali посмотри ответ, это может тебе помочь.

manikant gautam 10.09.2018 08:19
0
2
472
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны использовать window.getComputedStyle(input) для получения высоты элемента. Вот как это сделать. element.is(':visible') не присутствует ни на одной картинке в вашем коде.

Метод window.getComputedStyle() возвращает объект, который сообщает значения всех свойств CSS элемента после применения активного stylesheets и разрешения любых базовых вычислений, которые могут содержаться в этих значениях. Доступ к отдельным значениям свойств CSS осуществляется через API-интерфейсы, предоставляемые объектом, или путем простой индексации имен CSS property. больше отсюда

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';
}
Ответ принят как подходящий

ваш код работает правильно, как вы и ожидали. Я включил тестовый код

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>

Вопрос касается javascript, а не jquery.

manikant gautam 10.09.2018 08:14

@manikantgautam в ссылке в вопросе упоминается в ссылке, что он / она пытается сделать

Azad 10.09.2018 08:31

Другие вопросы по теме