查找元素是否可见(JavaScript)

问题描述 投票:0回答:6

我有一个 JavaScript 函数,它尝试确定 div 是否可见,并使用该变量执行各种处理。我成功地能够通过在无和块之间更改元素的显示来交换元素的可见性;但我无法存储这个值...

我尝试获取元素显示属性值并查找元素 ID 是否可见,但都不起作用。当我尝试 .getAttribute 时,它总是返回 null;我不知道为什么,因为我知道 id 已定义并且它有一个显示属性。

这是我尝试过的两种不同方法的代码:

var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");

任何指导或帮助将不胜感激。

javascript jquery dom visible getattribute
6个回答
22
投票

尝试这样:

$(function () {
    // Handler for .ready() called.
    if ($("#mydivID").is(":visible")) {
        alert('Element is visible');
    }
});

小提琴

请确保将 jQuery 文件包含在

head
标签内,如下

<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

12
投票

Display 不是一个属性,它是

style
属性内的 CSS 属性。

您可能正在寻找

var myvar = document.getElementById("mydivID").style.display;

var myvar = $("#mydivID").css('display');

12
投票

如果你只想用 javascript 方式来做这件事,你可以尝试

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')

8
投票

让我们花点时间看看

.is(":visible")
在 jQuery 中做了什么,好吗?

这是一个链接:https://github.com/jquery/jquery/blob/master/src/css.js#L529

return !jQuery.expr.filters.hidden( elem );

哪里

jQuery.expr.filters.hidden = function( elem ) {
    // Support: Opera <= 12.12
    // Opera reports offsetWidths and offsetHeights less than zero on some elements
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};

所以,它只是检查元素的偏移宽度和高度。

也就是说,同样值得注意的是,当 jQuery 检查某个元素是否为 hidden 时(即,就像触发“toggle”事件时),它会检查 display 属性 及其在 dom 中的存在性https://github.com/jquery/jquery/blob/master/src/css.js#L43


1
投票

var myvar = $("#mydivID").is(":visible"); //这是JQUERY如果可见就会返回true

var myvar = document.getElementById("mydivID").getAttribute("display"); //这里显示不是属性,因此这不会给出所需的结果。

我的解决方案

1.Select the element using QuerySelector
var myvar= document.querySelector('ELEMENT');

2.Check the OffsetWidth and Offsetheight to be greater than 0;
(myvar.offsetWidth > 0 || myvar.offsetHeight > 0)

3.if myvar is Greater than 0 then it's visble else not.

0
投票

内置函数中的 JavaScript 可用于检查元素可见性。

document.querySelector('#elementId').checkVisibility()
© www.soinside.com 2019 - 2024. All rights reserved.