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

Question

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

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

---

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

Answer 1

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

正如其他人所说,jQuery(如果你想使用jQuery)同时具有CSS选择器扩展 :visible和.is(':visible')在任何给定的jQuery对象上执行的能力,以便在任何给定的DOM元素上使用.css("display")或获取计算样式.css("visibility").

在普通的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);
};