当前滚动位置内可见。 元素可能超出滚动视野或部分可见。
目前没有标准的纯CSS规则来评估元素的可见性。
正如其他人所说,如果您想使用jQuery,它有一个CSS选择器扩展 :visible 以及对任何给定的jQuery对象执行 .is(':visible')
的能力,以获取具有 .css("display")
或 .css("visibility")
的任何给定DOM元素的计算样式。
在普通的JavaScript中,要确定对象是否可见并不特别简单,因为您必须获取computedStyle(考虑到可能影响元素的所有可能的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);
};
使用纯CSS无法选择不可见元素。
http://www.w3.org/TR/selectors/
然而,如果你有一个类名或其他选择器,使用jQuery,你可以像下面这样做
jQuery(selector).each(function(){
Var $this=$(this);
if ($this.css('visibility')==='hidden')
//set your style
})
编辑:在您的编辑之后,绝对没有办法仅使用CSS选择视口内的内容。这是某种无上下文语言。
然而,您可以始终使用jQuery调整元素的偏移位置,并确定它是否在当前视口(window.scrollposition或类似物)内。但是,这种解决方案很快就会变得混乱。
没有纯CSS的方法可以做到这一点。正如Kirean的评论所说,为什么你要只给可见元素设置样式呢?不可见元素无论如何都不会显示它们的样式。如果你不想让不可见元素占用空间(也就是不布局),你应该使用display: none;
如果你真的想要一个选择器来选择可见元素,你可以像Widor建议的那样使用jQuery。你可以先使用jQuery选择可见元素,给它们添加一个类,然后使用CSS通过该类选择元素。
$('div:visible').addClass('visibleElement');
.visibleElement {
color: red;
}
这看起来像是一个:visible
选择器:
http://api.jquery.com/visible-selector/
编辑:在你的“不使用CSS”限制之前看到了你的javascript
标签。
但这是一种CSS选择器。