是否有CSS:可见(滚动)选择器?

时间:2012-04-17 01:52:48

标签: javascript css css3

我想仅使用CSS更改可见元素的样式。有选择器吗?它只需要与Chrome和Firefox一起使用。 (我正在构建扩展/插件)

如果没有,有没有办法用轻量级的javascript改变可见元素的样式?


在当前滚动位置内可见。元素可以在滚动视觉之外,也可以部分可见。

5 个答案:

答案 0 :(得分:7)

评估可见性没有标准的纯CSS规则。

正如其他人所说,jQuery(如果你想使用jQuery)同时具有CSS selector extension :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);
};

答案 1 :(得分:3)

对我来说,这看起来像:visible选择器: http://api.jquery.com/visible-selector/

编辑:在“无CSS”警告之前看到您的javascript标记。

但这是各种各样的CSS选择器。

答案 2 :(得分: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或类似的东西)。但是,这种类型的解决方案很快就会变得混乱。

答案 3 :(得分:1)

没有纯粹的CSS方法。正如Kirean的评论已经说过,为什么你只想要设计可见元素?隐形元素无论如何都不会显示它们的造型。如果你不希望隐形元素占用空间(也就是布局),你应该使用display: none;

如果你真的想要一个选择器来选择可见元素,你可以做Widor建议并使用jQuery。您可以先使用jQuery首先选择可见元素,为它们添加一个类,然后使用CSS选择该类的元素。

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


.visibleElement {
  color: red;
}

答案 4 :(得分:0)

如果您已经在使用jQuery,那么可以使用Viewport插件,使用css选择器选择视口中的内容。它绝对不是纯CSS,但似乎是目前最接近的解决方案(再次假设你使用jQuery就可以了)。您可能需要执行以下操作:

$(window).scroll(function () {
    $('.interestingElements:in-viewport').addClass('iSeeYou');
});

希望最终会有一个原生CSS替代方案。