Можно переключить видимость элемента, используя функции .hide()
, .show()
или .toggle()
.
Как бы вы проверили, является ли элемент видимым или скрытым?
Можно переключить видимость элемента, используя функции .hide()
, .show()
или .toggle()
.
Как бы вы проверили, является ли элемент видимым или скрытым?
Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
То же, что и предложение twernt , но применяется к одному элементу; и он соответствует алгоритму, рекомендованному в FAQ jQuery
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// element is hidden
}
Вышеуказанный метод не учитывает видимость родителя. Чтобы рассмотреть родителя, вы должны использовать .is(":hidden")
или .is(":visible")
.
Например,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
Вышеуказанный метод рассмотрит
div2
видимых, а:visible
нет. Но вышеупомянутое может быть полезно во многих случаях, особенно если вам нужно найти, есть ли какие-либо ошибки divs, видимые в скрытом родителе, потому что в таких условиях:visible
не будет работать.
Ни один из этих ответов не касается того, что я понимаю, и это вопрос, который я искал: «Как обрабатывать элементы с visibility: hidden
?» , Ни :visible
ни :hidden
не справятся с этим, поскольку они оба ищут отображение в документации. Насколько я могу судить, нет селектора для обработки видимости CSS. Вот как я его разрешил (стандартные селектора jQuery, может быть более сжатый синтаксис):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
From Как определить состояние переключаемого элемента?
Вы можете определить, сгенерирован ли элемент или нет, с помощью селекторов :visible
и :hidden
.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Если вы просто воздействуете на элемент на основе его видимости, вы можете просто включить :visible
или :hidden
в выражении селектора. Например:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
Часто, проверяя, что-то видимо или нет, вы немедленно пойдете прямо вперед и сделаете что-то еще с ним. Цепочка jQuery делает это проще.
Поэтому, если у вас есть селектор, и вы хотите выполнить какое-либо действие на нем, только если он виден или скрыт, вы можете использовать filter(":visible")
или filter(":hidden")
а затем привязать его к действию, которое вы хотите предпринять.
Итак, вместо утверждения if
, например:
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
Или более эффективным, но даже более уродливым:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
Вы можете сделать все это в одной строке:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Селектор :visible
соответствии с документацией jQuery :
- У них значение CSS
display
равноnone
.- Они являются элементами формы с
type="hidden"
.- Их ширина и высота явно установлены в 0.
- Элемент предка скрыт, поэтому элемент не отображается на странице.
Элементы с
visibility: hidden
илиopacity: 0
считаются видимыми, поскольку они все еще потребляют пространство в макете.
Это полезно в некоторых случаях и бесполезно для других, потому что, если вы хотите проверить, является ли элемент видимым ( display != none
), игнорируя видимость родителей, вы обнаружите, что выполнение .css("display") == 'none'
выполняется не только быстрее, но также верно вернет проверку видимости ,
Если вы хотите проверить видимость вместо отображения, вы должны использовать: .css("visibility") == "hidden"
.
Также учтите дополнительные примечания jQuery :
Поскольку
:visible
является расширением jQuery, а не частью спецификации CSS, запросы с использованием:visible
не могут воспользоваться повышением производительности, обеспечиваемым встроенным методом DOMquerySelectorAll()
. Чтобы добиться наилучшей производительности при использовании:visible
для выбора элементов, сначала выберите элементы, используя чистый селектор CSS, затем используйте.filter(":visible")
.
Кроме того, если вас беспокоит производительность, вы должны проверить Теперь вы видите меня ... показать /скрыть производительность (2010-05-04). И используйте другие методы для отображения и скрытия элементов.
Это работает для меня, и я использую show()
и hide()
чтобы сделать мой div скрытым /видимым:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
Как видимость элементов и jQuery работает ;
Элемент может быть скрыт с display:none
, visibility:hidden
или opacity:0
. Разница между этими методами:
display:none
скрывает элемент, и он не занимает места; visibility:hidden
скрывает элемент, но он все еще занимает место в макете; opacity:0
скрывает элемент как «видимость: скрытый», и он по-прежнему занимает место в макете; единственная разница заключается в том, что непрозрачность позволяет сделать элемент частично прозрачным;
if ($('.target').is(':hidden')) {
$('.target').show();
} else {
$('.target').hide();
}
if ($('.target').is(':visible')) {
$('.target').hide();
} else {
$('.target').show();
}
if ($('.target-visibility').css('visibility') == 'hidden') {
$('.target-visibility').css({
visibility: "visible",
display: ""
});
} else {
$('.target-visibility').css({
visibility: "hidden",
display: ""
});
}
if ($('.target-visibility').css('opacity') == "0") {
$('.target-visibility').css({
opacity: "1",
display: ""
});
} else {
$('.target-visibility').css({
opacity: "0",
display: ""
});
}
Полезные методы переключения jQuery:
$('.click').click(function() {
$('.target').toggle();
});
$('.click').click(function() {
$('.target').slideToggle();
});
$('.click').click(function() {
$('.target').fadeToggle();
});
Я бы использовал CSS класс .hide { display: none!important; }
.
Для сокрытия /показа, я звоню .addClass("hide")/.removeClass("hide")
. Для проверки видимости я использую .hasClass("hide")
.
Это простой и понятный способ проверить /скрыть /показать элементы, если вы не планируете использовать .toggle()
или .animate()
метода.
Вы также можете сделать это, используя простой JavaScript:
function isRendered(domObj) {
if ((domObj.nodeType != 1) || (domObj == document.body)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
return isRendered(domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle(domObj, null);
if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
return isRendered(domObj.parentNode);
}
}
return false;
}
Заметки:
Работает везде
Работает для вложенных элементов
Работает для CSS и встроенных стилей
Не требует рамок
Можно просто использовать атрибут hidden
или visible
, например:
$('element:hidden')
$('element:visible')
Или вы можете упростить то же самое, что и в следующем.
$(element).is(":visible")
Другой ответ, который вы должны учесть, это то, что если вы скрываете элемент, вы должны использовать jQuery , но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его содержимое HTML и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя нормальный if (!$('#thetagname').length)
.
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />
Источник:
jsFiddle:
ebdiv
должно быть установлено равным style="display:none;"
. Это работает для шоу и скрыть:
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
При тестировании элемента против селектора :hidden
в jQuery следует учитывать, что абсолютный позиционный элемент может быть распознан как скрытый, хотя их дочерние элементы видны .
В первую очередь это кажется несколько противоречащим интуиции - хотя более пристальный взгляд на документацию jQuery дает соответствующую информацию:
Элементы можно считать скрытыми по нескольким причинам: [...] Их ширина и высота явно установлены в 0. [...]
Таким образом, это действительно имеет смысл в отношении box-model и вычисленного стиля для элемента. Даже если ширина и высота не заданы явно 0, они могут быть установлены неявно .
Взгляните на следующий пример:
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;
}
.bar {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar"></div>
</div>
UPDATE FOR JQUERY 3.x:
С jQuery 3 описанное поведение изменится! Элементы будут считаться видимыми, если у них есть какие-либо макеты, включая нулевые ширины и /или высоты.
JSFiddle с jQuery 3.0.0-alpha1:
Тот же JS будет иметь следующий результат:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
Это может работать:
expect($("#message_div").css("display")).toBe("none");
Пример:
$(document).ready(function() {
if ($("#checkme:hidden").length) {
console.log('Hidden');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>
Чтобы проверить, не видно ли это, я использую !
:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Или следующее также является sam, сохраняя селектор jQuery в переменной, чтобы иметь лучшую производительность, когда вам это нужно несколько раз:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Использование классов, предназначенных для «скрытия» элементов, является простым, а также одним из наиболее эффективных методов. Переключение класса 'hidden' с типом Display
не будет выполняться быстрее, чем редактирование этого стиля напрямую. Я объяснил некоторые из этого довольно подробно в вопросе переполнения стека. Поворот двух элементов, видимых /скрытых в одном div .
Вот поистине просветительский видеоролик Google Tech Talk от главного инженера Google Николаса Закаса:
Пример использования видимой проверки для рекламного блока активирован:
$(document).ready(function(){
if(!$("#ablockercheck").is(":visible"))
$("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>
«ablockercheck» - это идентификатор, который блокирует рекламный блок. Поэтому, проверяя, видно ли это, вы можете определить, включен ли рекламный блок.
В конце концов, ни один из примеров не подходит мне, поэтому я написал свой собственный.
Тесты (без поддержки Internet Explorer filter:alpha
):
a) Проверьте, не скрыт ли документ
б) Проверьте , если элемент имеет нулевой ширина /высота /непрозрачность или display:none
/visibility:hidden
в встроенных стилей
c) Убедитесь, что центр (также потому, что он быстрее, чем тестирование каждого пикселя /угла) элемента не спрятан другим элементом (и всеми предками, например: overflow:hidden
/прокрутка /один элемент поверх enother) или краями экрана
d) Проверьте, имеет ли элемент нулевую ширину /высоту /непрозрачность или display:none
/видимость: скрытые в вычисленных стилях (среди всех предков)
Протестировано
Android 4.4 (собственный браузер /Chrome /Firefox), Firefox (Windows /Mac), Chrome (Windows /Mac), Opera (Windows Presto /Mac Webkit), Internet Explorer (режимы работы Internet Explorer 5-11 и Internet Explorer 8 на виртуальная машина), Safari (Windows /Mac /iOS)
var is_visible = (function () {
var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
relative = !!((!x && !y) || !document.elementFromPoint(x, y));
function inside(child, parent) {
while(child){
if (child === parent) return true;
child = child.parentNode;
}
return false;
};
return function (elem) {
if (
document.hidden ||
elem.offsetWidth==0 ||
elem.offsetHeight==0 ||
elem.style.visibility=='hidden' ||
elem.style.display=='none' ||
elem.style.opacity===0
) return false;
var rect = elem.getBoundingClientRect();
if (relative) {
if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
} else if (
!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight/2 < 0 ||
rect.left + elem.offsetWidth/2 < 0 ||
rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if(!el.parentNode) return false;
comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
el = el.parentNode;
}
}
return true;
}
})();
Как использовать:
is_visible(elem) // boolean
Вам нужно проверить оба ... Показать, а также видимость:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
Если мы проверим на $(this).is(":visible")
, jQuery проверяет оба события автоматически.
Может быть, вы можете сделать что-то подобное
$(document).ready(function() {
var visible = $('#tElement').is(':visible');
if(visible) {
alert("visible");
// Code
}
else
{
alert("hidden");
}
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<input type="text" id="tElement" style="display:block;">Firstname</input>
Поскольку Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout
(как описано для jQuery: visible Selector ) - мы можем проверить, действительно ли элемент выглядит так:
function isElementReallyHidden (el) {
return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
if (isElementReallyHidden(this)) {
booElementReallyShowed = false;
}
});
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
Но что, если CSS элемента выглядит следующим образом?
.element{
position: absolute;left:-9999;
}
Таким образом, этот ответ на вопрос о переполнении стека. Как проверить, является ли элемент вне экрана, также следует учитывать.
Просто проверьте видимость, проверив логическое значение, например:
if (this.hidden === false) {
// Your code
}
Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible')
для проверки видимости элемента.
Функция может быть создана для проверки атрибутов видимости /отображения, чтобы определить, отображается ли элемент в пользовательском интерфейсе или нет.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
Также здесь есть тернарное условное выражение для проверки состояния элемента, а затем для его переключения:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
.is(":not(':hidden')") /*if shown*/
Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет false, если глаза не смогут увидеть элемент
jQuery.fn.extend({
isvisible: function() {
//
// This function call this: $("div").isvisible()
// Return true if the element is visible
// Return false if the element is not visible for our eyes
//
if ( $(this).css('display') == 'none' ){
console.log("this = " + "display:none");
return false;
}
else if( $(this).css('visibility') == 'hidden' ){
console.log("this = " + "visibility:hidden");
return false;
}
else if( $(this).css('opacity') == '0' ){
console.log("this = " + "opacity:0");
return false;
}
else{
console.log("this = " + "Is Visible");
return true;
}
}
});
if($('#id_element').is(":visible")){
alert('shown');
}else{
alert('hidden');
}
Так JQuery решает эту проблему внутри страны:
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
Если вы не используете jQuery, вы можете просто использовать этот код и превратить его в свою собственную функцию:
function isVisible(elem) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
Какой isVisible
будет возвращать true
до тех пор, пока элемент будет виден.
Существует несколько способов проверить, является ли элемент видимым или скрытым в jQuery.
Демо-код HTML, например, ссылка
<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>
Используйте переключатель выбора видимости $('element:hidden')
или $('element:visible')
$('element:hidden')
: выбор всех скрытых элементов.
Example:
$('#content2:hidden').show();
$('element:visible')
: выбор всех видимых элементов.
Example:
$('#content:visible').css('color', '#EEE');
Подробнее читайте на странице http://api.jquery.com/category/selectors/visibility-filter-selectors/
Используйте is()
фильтров
Example:
$('#content').is(":visible").css('color', '#EEE');
Or checking condition
if ($('#content').is(":visible")) {
// Perform action
}
Подробнее читайте на http://api.jquery.com/is/
Вы можете использовать это:
$(element).is(':visible');
$(document).ready(function()
{
$("#toggle").click(function()
{
$("#content").toggle();
});
$("#visiblity").click(function()
{
if( $('#content').is(':visible') )
{
alert("visible"); // Put your code for visibility
}
else
{
alert("hidden");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<p id="content">This is a Content</p>
<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>
Просто проверьте, является ли этот элемент видимым, и он вернет логическое , jQuery скрыть элементы, добавив отображение none в элемент, поэтому, если вы хотите использовать чистый JavaScript, вы все равно можете это сделать, например:
if (document.getElementById("element").style.display === 'block') {
// your element is visible, do whatever you'd like
}
Кроме того, вы можете использовать jQuery, поскольку, как кажется, остальная часть вашего кода использует это, и у вас есть меньший блок кода, что-то вроде ниже в jQuery, делает для вас один и тот же трек:
if ($(element).is(":visible")) {
// your element is visible, do whatever you'd like
};
Также использование метода css в jQuery может привести к тому же:
if ($(element).css('display')==='block') {
// your element is visible, do whatever you'd like
}
Также в случае проверки видимости и отображения вы можете сделать следующее:
if ($(this).css("display")==="block"||$(this).css("visibility")==="visible") {
// your element is visible, do whatever you'd like
}
Поскольку hide()
, show()
и toggle()
присоединяют к элементу встроенный css (display: none или display: block). Аналогично, мы можем легко использовать трехмерный оператор для проверки погодного элемента, который скрыт или видим, проверив отображение css.
ОБНОВИТЬ:
Таким образом, мы можем проверить свойство элемента, которое делает его невидимым. Так что они display: none
и visibility: "hidden";
Мы можем создать объект для проверки свойства, ответственного за сокрытие элемента:
var hiddenCssProps = {
display: "none",
visibility: "hidden"
}
Мы можем проверить, пройдя через каждое значение ключа при сопоставлении объектов, если свойство элемента для ключа совпадает со скрытым значением свойства.
var isHidden = false;
for(key in hiddenCssProps) {
if($('#element').css(key) == hiddenCssProps[key]) {
isHidden = true;
}
}
Если вы хотите проверить свойство, например, высоту элемента: 0 или ширину: 0 или более, вы можете расширить этот объект и добавить к нему больше свойства и проверить его.
Спасибо @Krzysztof Przygoda за то, что напомнили мне другие свойства дисплея.
Это некоторая возможность проверить, что тег виден или нет.
// using a pure CSS selector
if ($('p:visible')) {
alert('Paragraphs are visible (checked using a CSS selector) !');
};
// using jQuery's is() method
if ($('p').is(':visible')) {
alert('Paragraphs are visible (checked using is() method)!');
};
// using jQuery's filter() method
if ($('p').filter(':visible')) {
alert('Paragraphs are visible (checked using filter() method)!');
};
// you can use :hidden instead of :visible to reverse the logic and check if an element is hidden
// if ($('p:hidden')) {
// do something
// };
Я просто хочу уточнить, что в jQuery,
Элементы можно считать скрытыми по нескольким причинам:
- У них нет значения отображения в CSS.
- Это элементы формы с типом = «скрытые».
- Их ширина и высота явно установлены в 0.
- Элемент предка скрыт, поэтому элемент не отображается на странице.
Элементы с видимостью: скрытые или непрозрачные: 0 считаются видимыми, поскольку они все еще потребляют пространство в макете. Во время анимаций, которые скрывают элемент, элемент считается видимым до конца анимации.
Источник:: скрытый селектор | Документация API jQuery
if($('.element').is(':hidden')) {
// Do something
}
Вы можете просто добавить класс, когда он будет виден. Добавьте класс, show
. Затем проверьте, есть ли у него класс:
$('#elementId').hasClass('show');
Он возвращает true, если у вас есть класс show
.
Добавьте CSS следующим образом:
.show{ display: block; }
Существует слишком много способов проверки скрытых элементов. Это лучший выбор (я только что вам рекомендовал):
Используя jQuery, создайте элемент «display: none» в CSS для скрытия.
Дело в том:
$('element:visible')
И пример использования:
$('element:visible').show();
Вы можете использовать
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
Документация API: https://api.jquery.com/visible-selector/
Просто проверьте атрибут display
(или visibility
зависимости от того, какую именно невидимость вы предпочитаете). Пример :
if ($('#invisible').css('display') == 'none') {
// This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
if($("h1").is(":hidden")){
// your code..
}
В некоторых случаях, если вы хотите проверить, является ли элемент видимым на странице, в зависимости от видимости его патента, вы можете проверить, равен ли width
и height
элемента, равным 0
, оба.
JQuery
$element.width() === 0 && $element.height() === 0
ваниль
element.clientWidth === 0 && element.clientHeight === 0
Или
element.offsetWidth === 0 && element.offsetHeight === 0
Вы можете использовать класс css, когда он отображается или скрывается, переключая класс.
.show{ display :block; }
Установите jQuery toggleClass()
или addClass()
или removeClass();
.
В качестве примера,
jQuery('#myID').toggleClass('show')
Вышеприведенный код добавит show
css-классов, когда элемент не имеет show
и удалит, когда у него есть show
класс.
И когда вы проверяете, видимо это или нет, вы можете следовать этому коду jQuery,
jQuery('#myID').hasClass('show');
Выше код вернет логическое значение (true), когда #myID
элементов имеют наш класс ( show
) и false, если у него нет класса ( show
).
Вместо того, чтобы писать event
для каждого element
, сделайте следующее:
$('div').each(function(){
if($(this).css('display') === 'none'){
$(this).css({'display':'block'});
}
});
Также вы можете использовать его на входах:
$('input').each(function(){
if($(this).attr('type') === 'hidden'){
$(this).attr('type', 'text');
}
});
Вы можете сделать это:
isHidden = function(element){
return (element.style.display === "none");
};
if(isHidden($("element")) == true){
// something
}
Решение jQuery, довольно старый вопрос, но все же я упал. Я могу дать немного лучший ответ тем, кто хочет изменить текст кнопки.
$(function(){
$("#showHide").click(function(){
var btn = $(this);
$("#content").toggle(function () {
btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showHide">Hide</button>
<div id="content">
<h2>Some content</h2>
<p>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>