如何使元素的可见度.hide(), .show(),或.toggle()?
如果一个元素是visible或hidden?
当前回答
你可以试试这个
$(document).ready(function() {
var view = $(this).is(':visible');
if(view) {
alert("view");
// Code
}
else
{
alert("hidden");
}
});
其他回答
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>此选项可以检查标签是否可见
// 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
// }; 您也可以使用 plain 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 和内嵌样式的工作
不需要框架
您可以使用 jQuery 的is()函数可以检查选定元素的可见或隐藏。该方法沿 DOM 元素沿 DOM 元素绕行查找匹配,以找到符合已传递参数的匹配。如果匹配返回错误,则返回为真实。
<script>
($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
这对我有效,我用show()和hide()使我的divi 隐藏/可见:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
