如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
如果您想要检查页面上是否可见某个元素, 取决于其父的可见度, 您可以检查是否width
和height
本要素的数值均等于0
.
jj 查询
$element.width() === 0 && $element.height() === 0
香草香草
element.clientWidth === 0 && element.clientHeight === 0
或
element.offsetWidth === 0 && element.offsetHeight === 0
其他回答
它返回时返回false
如果元素不可见。
function checkVisible(e) {
if (!(e instanceof Element)) throw Error('not an Element');
const elementStyle = getComputedStyle(e);
if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
e.getBoundingClientRect().width === 0) {
return false;
}
const elemCenter = {
x: e.getBoundingClientRect().left + e.offsetWidth / 2,
y: e.getBoundingClientRect().top + e.offsetHeight / 2
};
if (elemCenter.x < 0 || elemCenter.y < 0) return false;
if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
do {
if (pointContainer === e) return true;
} while (pointContainer = pointContainer.parentNode);
return false;
}
if($('#id_element').is(":visible")){
alert('shown');
}else{
alert('hidden');
}
使用指定用于“隐藏”元素的分类很简单,也是最有效的方法之一。Display
“ 无” 样式的“ 无” 样式的性能将比直接编辑该样式更快。 我在 Stack 溢出问题中非常透彻地解释了其中的一些内容 。在同一 div 中将两个元素转换为可见/隐藏.
Google前端工程师Nicholas Zakas在Google Tech Talk的影片中,
我会用CSS课.hide { display: none!important; }
.
躲藏/展示,我打电话.addClass("hide")/.removeClass("hide")
为了检查能见度,我使用.hasClass("hide")
.
这是一个简单清晰的检查/隐藏/显示元素的方法, 如果你不计划使用.toggle()
或.animate()
方法。