如何使元素的可见度.hide(), .show(),或.toggle()?
如果一个元素是visible或hidden?
当前回答
使用可见可见启用阻塞器时检查 :
$(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>“ 阻塞检查” 是一个 adblocker 区块的代号。 所以如果它可见, 您可以检测是否打开了阻塞器 。
其他回答
这对我有效,我用show()和hide()使我的divi 隐藏/可见:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
公平地说,问题在日期之前这笔回答。
我不是要批评《任择议定书》,而是要帮助任何仍在提出这一问题的人。
确定某物是否可见的正确方法是咨询你的视觉模型;
如果你不知道这意味着什么 那你就要踏上发现之旅 让你的工作变得不那么困难了
以下是对示范 -- -- 观观 -- -- 模型建筑(MVVM)。
击出JS是一个具有约束力的图书馆, 它会让您在不学习整个框架的情况下尝试这些 。
这里有一些 JavaScript 代码和一个DIV 可能可见也可能看不到。
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
var vm = {
IsDivVisible: ko.observable(true);
}
vm.toggle = function(data, event) {
// Get current visibility state for the div
var x = IsDivVisible();
// Set it to the opposite
IsDivVisible(!x);
}
ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>
请注意,切换函数不与国防部协商确定 div 的可见度;它参考视觉模型。
就是这样jj 查询内部解决这个问题 :
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只要元素是可见的。
如果隐藏在类 - d - no 类中
if (!$('#ele').hasClass('d-none')) {
$('#ele').addClass('d-none'); //hide
}
$(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>