是否有CSS :visible（scroll）选择器？

Question

是否有CSS :visible（scroll）选择器？

javascriptcss

16

我想仅使用CSS更改可见元素的样式。是否有一个选择器可以做到这一点？它需要与Chrome和Firefox兼容。（我正在构建一个扩展/插件）如果没有，是否有一种使用轻量级Javascript更改可见元素样式的方法？

当前滚动位置内可见。元素可能超出滚动视野或部分可见。

- BrunoLM

5

为什么需要仅对可见项进行样式设置？对不可见元素进行样式设置是没有作用的。 - Thomas Jones

2

值得注意的是，display:none和visibility:hidden两者对用户来说都是不可见的，但含义却大不相同。在考虑“不可见”和“可见”的含义时，请记住这一点。 - Thomas Jones

3

@ShivanRaptor也许他们的商业计划不包括IE浏览器。如果是这样，我也想要他们的商业计划！但总的来说，我同意，除非在任何地方都能使用，否则解决方案并不是一个真正的解决方案。 - Thomas Jones

1

@ShivanRaptor 如果你正在为 Firefox 开发插件，那么你的说法还是有效的吗？ - BrunoLM

@ThomasJones 当隐藏元素干扰到nth-child计数（如奇数和偶数）时，它会执行某些操作。 - user1834464

显示剩余5条评论

4个回答

1

使用纯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或类似物）内。但是，这种解决方案很快就会变得混乱。

- Thomas Jones

正如其他解决方案所示，有一种更简单的方法来完成这个任务。 - Scalpweb

1

没有纯CSS的方法可以做到这一点。正如Kirean的评论所说，为什么你要只给可见元素设置样式呢？不可见元素无论如何都不会显示它们的样式。如果你不想让不可见元素占用空间（也就是不布局），你应该使用display: none;

如果你真的想要一个选择器来选择可见元素，你可以像Widor建议的那样使用jQuery。你可以先使用jQuery选择可见元素，给它们添加一个类，然后使用CSS通过该类选择元素。

$('div:visible').addClass('visibleElement');


.visibleElement {
  color: red;
}

- ming_codes

0

这看起来像是一个:visible选择器： http://api.jquery.com/visible-selector/

编辑：在你的“不使用CSS”限制之前看到了你的javascript标签。

但这是一种CSS选择器。

- Widor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

目前没有标准的纯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);
};