相关疑难解决方法(0)

有什么方法可以检查一个元素是否在纯JS(没有jQuery)中可见？

因此,例如,在此页面中:Performance Bikes,如果您将鼠标悬停在Deals(在顶部菜单上),则会出现一个交易窗口,但在开始时它没有显示.它在HTML中,但不可见.

因此,给定一个DOM元素,我该如何检查它是否可见？我试过了:

window.getComputedStyle(my_element)['display']);

但它似乎没有起作用.我想知道应该检查哪些属性.它出现在我的脑海里:

display !== 'none'
visibility !== 'hidden'

还有其他我可能会失踪的人？

正如您可以看到下面的图片,网站上有"A","B","C","D"和"E",用户可能只能看到A,B和一小部分D在他们的浏览器中.他们需要向下滚动浏览器,或者某些用户可能拥有更大的屏幕,或浏览器上更长的窗口,这样他们甚至可以看到元素C.

好的,我的问题是,这可以让我知道用户在浏览器上使用javascript看到了什么吗？在这个元素中,是"A","B"和"D".

我有将日语汉字转换成罗马字母(罗马字母)的网站:

并且输出显示和隐藏CSS用户需要根据其输入条件查看的内容.例如:

<div id="output">
    <span class="roman">watashi</span> 
    <span class="english">I</span>
</div>

该接口允许用户之间的输出翻转watashi或I取决于他们想看到的.

在CSS生皮的一个或另一个使用jQuery和切换按钮.(隐藏机制涉及简单地添加一个类body并让它CSS做它的事情).

问题是,当用户将文本复制/粘贴到Word其中时,复制所有内容.所以我决定使用系统来复制使用JavaScript和粘贴文本jQuery,但问题重复:

$('#output').text()

输出watashi I即使I在页面本身不可见而不是watashi.有没有办法获得可见的文字？

StackOverflow的是装载 有 问题有关如何检查元素是否在检视真正可见的,但它们都寻求一个布尔答案.我有兴趣获得元素的可见实际区域.

function getVisibleAreas(e) {
    ...
    return rectangleSet;
}

更正式地说 - 元素的可见区域是CSS坐标中的一组(最好是非重叠的)矩形,elementFromPoint(x, y)如果点(x,y)包含在(至少)一个矩形中,它将返回元素.集合.

在所有DOM元素(包括iframe)上调用此函数的结果应该是一组非重叠区域集,其中union是整个视口区域.

我的目标是创建一种视口"转储"数据结构,它可以有效地为视口中的给定点返回单个元素,反之亦然 - 对于转储中的给定元素,它将返回可见的集合区域.(数据结构将传递给远程客户端应用程序,因此当我需要查询视口结构时,我不一定能访问实际文档).

实施要求:

function AreaPortion(l, t, r, b, currentDoc) {
    if (!currentDoc) currentDoc = document;
    this._x = l;
    this._y = t;
    this._r = r;
    this._b = b;
    this._w …

截至2013年2月,在谈到所有全新的顶级API(包括实验性的甚至是疯狂的API)时,您能否提供如何检测特定DOM节点当前是否在视口中的情况.

跨浏览器是一个加号.灵活性和普遍性是更大的优势.

所以,基本上我需要像is_in_viewport(dom_node)那样返回布尔值.

一些澄清.让我们通过可见性意味着元素的至少一个像素在视口中是物理可见的(不一定是窗口).

通过经典方法我的意思是:

• 使用offsetTop,offsetLeft等属性测量元素的尺寸和位置.
• 使用getBoundingClientRect

所以,简单来说,我正在寻找某种API,它隐藏了处理直接测量和后续计算的抽象级别.

我想检查用户是否可以在不滚动的情况下在当前Web浏览器视图中看到元素.

我发现的可以检查元素是否在页面上的某个位置.

另一个暗示建议检查元素位置但是我需要获得浏览器的可见窗口的尺寸加上其x/y偏移量为0/0.

如果有人能指出我不需要JavaScript代码的解决方案,我将不胜感激.

有没有办法确定 elementA 是否在另一个元素“后面”，因此 elementA 对用户不可见？

显然，可以使用stacking context，但问题是我们不知道应该查看哪些元素。因此，我们必须遍历 DOM 中的所有元素，并对多个元素执行堆叠上下文比较。这在性能方面并不好。

这是一个jsfiddle。那么有没有办法确定 #hidden-element 对用户不可见，因为另一个元素呈现在它上面？

https://jsfiddle.net/b9dek40b/5/

HTML：

<div id="covering-element"></div>
<div>
  <div id="hidden-element"></div>
</div>

款式：

#covering-element {
  position: absolute;
  width: 100px;
  height: 100px;
  background: darksalmon;
  text-align: center;
}

#hidden-element {
  width: 25px;
  height: 25px;
  background: deeppink;
}

我希望编写一个简单的javascript函数来切换给定元素的可见性.问题是,在页面加载之后,初始样式是未知的(至少对我而言).如何确定给定元素的显示样式元素的当前值是什么？

查找DOM对象是否可见的最佳方法是什么？

当对象被认为不可见时的各种情况:

1. display:none;
2. 能见度:隐藏;
3. 其中一个父母有显示:无或可见性:隐藏
4. 另一个DOM元素模糊了查询元素(很高兴,但我没有它可以管理).
5. 屏幕边界之外的项目.