Javascript 是否有 CSS :visible (scroll) 选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10184065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS :visible (scroll) selector?
提问by BrunoLM
I want to change the style of visible elements using CSS only. Is there a selector that does it? It needs to work with Chrome and Firefox only. (I am building an extension / addon)
我只想使用 CSS 更改可见元素的样式。是否有一个选择器可以做到这一点？它只需要与 Chrome 和 Firefox 配合使用。（我正在构建一个扩展/插件）
If there isn't, is there a way to change the style of visible elements with a light javascript?
如果没有，有没有办法用轻量级的 javascript 改变可见元素的样式？
Visible within the current scroll position. An element can be out of the scroll vision, or partially visible.
在当前滚动位置内可见。一个元素可以在滚动视野之外，或者部分可见。
采纳答案by jfriend00
There is no standard pure CSS rule for assessing visibility.
没有用于评估可见性的标准纯 CSS 规则。
As others have said, jQuery (if you wanted to use jQuery) has both a CSS selector extension:visibleand the ability to execute .is(':visible')on any given jQuery object to get the computed style on any given DOM element with .css("display")or .css("visibility").
正如其他人所说，jQuery（如果您想使用 jQuery）既有CSS 选择器扩展:visible，也有.is(':visible')在任何给定 jQuery 对象上执行以使用.css("display")或获取任何给定 DOM 元素的计算样式的能力.css("visibility")。
It's not particularly simple in plain javascript to determine if an object is visible because you have to get the computedStyle (to take into account all possible CSS rules that might be affecting the element) and you have to make sure no parent objects are hidden causing the child element to be hidden. This is a function I have in my own personal library:
在普通的 javascript 中确定一个对象是否可见并不是特别简单，因为您必须获得计算样式（考虑可能影响元素的所有可能的 CSS 规则）并且您必须确保没有父对象被隐藏导致要隐藏的子元素。这是我在自己的个人库中拥有的一个功能：
//----------------------------------------------------------------------------------------------------------------------------------
// JF.isVisible function
//
// Determines if the passed in object is visible (not visibility:hidden, not display: none
// and all parents are visible too.
//
// Source: http://snipplr.com/view/7215/javascript-dom-element-visibility-checker/
//----------------------------------------------------------------------------------------------------------------------------------
JF.isVisible = function(obj)
{
var style;
if (obj == document) return true;
if (!obj) return false;
if (!obj.parentNode) return false;
if (obj.style) {
if (obj.style.display == 'none') return false;
if (obj.style.visibility == 'hidden') return false;
}
//Try the computed style in a standard way
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, "")
if (style.display == 'none') return false;
if (style.visibility == 'hidden') return false;
} else {
//Or get the computed style using IE's silly proprietary way
style = obj.currentStyle;
if (style) {
if (style['display'] == 'none') return false;
if (style['visibility'] == 'hidden') return false;
}
}
return JF.isVisible(obj.parentNode);
};
回答by ming_codes
There is no pure CSS way of doing this. As Kirean's comment already said, why would you want to style visible elements only? Invisible elements won't show their styling anyway. If you don't want the invisible element to take up space (aka, laid out), you should use display: none;
没有纯粹的 CSS 方法可以做到这一点。正如 Kirean 的评论已经说过的那样，为什么您只想为可见元素设置样式？隐形元素无论如何都不会显示它们的样式。如果您不希望隐形元素占用空间（又名，布局），您应该使用display: none;
If you REALLY want a selector to select the visible elements, you could do what Widor suggested and use jQuery. You could first use jQuery to first select the visible elements, add a class to them, then use CSS to select the elements by that class.
如果你真的想要一个选择器来选择可见元素，你可以按照 Widor 的建议使用 jQuery。您可以首先使用 jQuery 首先选择可见元素，向它们添加一个类，然后使用 CSS 通过该类选择元素。
$('div:visible').addClass('visibleElement');
.visibleElement {
color: red;
}
回答by Widor
This looks like a :visibleselector to me:
http://api.jquery.com/visible-selector/
这:visible对我来说看起来像一个选择器：http:
//api.jquery.com/visible-selector/
EDIT: Saw your javascripttag before your 'no CSS' caveat.
编辑：javascript在您的“无 CSS”警告之前看到您的标签。
But this is a CSS selector of sorts.
但这是某种 CSS 选择器。
回答by Thomas Jones
There is no Way to select invisible elements, using pure CSS
没有办法选择不可见元素，使用纯 CSS
http://www.w3.org/TR/selectors/
http://www.w3.org/TR/selectors/
However, if you have a class name or other selector, using jquery you can do something like the following
但是，如果您有类名或其他选择器，则可以使用 jquery 执行以下操作
jQuery(selector).each(function(){
Var $this=$(this);
if ($this.css('visibility')==='hidden')
//set your style
})
Edit: after your edit, there is definitely no way of selecting what is within the viewport with CSS alone. It is a context free language of sorts.
编辑：在您编辑之后，绝对无法单独使用 CSS 选择视口内的内容。它是一种上下文无关的语言。
However, you can always fool around with an elements offset position with jquery and determine if it's within the current viewport(window.scrollposition or something similar). This type of solution gets messy quickly, though.
但是，您始终可以使用 jquery 来处理元素偏移位置，并确定它是否在当前视口内（window.scrollposition 或类似的东西）。但是，这种类型的解决方案很快就会变得混乱。
回答by redbmk
If you're already using jQuery, there's a Viewportplugin that allows you to select what's in the viewport using a css selector. It's definitely not pure CSS, but seems to be the closest solution at the moment (again, assuming you're OK with using jQuery). You would probably have to do something like:
如果您已经在使用 jQuery，那么有一个Viewport插件可以让您使用 css 选择器选择视口中的内容。它绝对不是纯 CSS，但目前似乎是最接近的解决方案（再次假设您可以使用 jQuery）。您可能必须执行以下操作：
$(window).scroll(function () {
$('.interestingElements:in-viewport').addClass('iSeeYou');
});
Hopefully there will eventually be a native CSS alternative.
希望最终会有一个原生 CSS 替代品。
