Gibt es eine CSS :sichtbar (scroll) - Selektor?

Will ich ändern den Stil der sichtbaren Elemente mit CSS. Gibt es einen Selektor, der es tut? Es muss funktionieren mit Chrome und Firefox nur. (Ich bin Gebäude eine Erweiterung /addon)

Wenn es nicht ist, gibt es eine Möglichkeit, ändern Sie den Stil der sichtbaren Elemente mit einer leichten javascript?

Sichtbar in der aktuellen scroll-position. Ein element kann aus den Blättern vision, oder teilweise sichtbar ist.

  • Warum würden Sie brauchen, um Stil, den die sichtbaren Objekte nur? Styling unsichtbare Elemente nicht sowieso nichts machen
  • Wenn Sie bereit sind, um jQuery verwenden, es hat eine :visible pseudo-Selektor.
  • Wie die Kirean, sagte, die änderung unsichtbare Elemente ein-macht nichts, zumindest was zu sehen ist. Nehmen wir an, Sie haben bereits einige JS oder PHP, die swaps aus den in - /sichtbare Elemente, wie benötigt, also warum willst du JS vermeiden? Ein wenig mehr Klarheit über das, was Sie versuchen zu erreichen, und möglicherweise ist der eigentliche code, was du probiert haben, können wir bessere Lösungen.
  • Es ist erwähnenswert, hier, dass display:none und visibility:hidden sind sowohl für den Benutzer unsichtbar, aber haben sehr unterschiedliche Bedeutungen. Behalten Sie dies im Hinterkopf, wenn Sie über die Bedeutung 'unsichtbarer' und 'sichtbarer'
  • Sie sollten beachten, dass der Unterschied in der display:none und visibility:hidden. Unsichtbares Objekt können verbrauchen Speicherplatz ...
  • vielleicht Ihren business case nicht enthalten, DH. wenn das der Fall ist, ich möchte Ihre business Fall! Aber generell Stimme ich zu, eine Lösung ist keine Lösung, es sei denn, es funktioniert überall.
  • Und welche Art von Stil, den Sie zuweisen möchten, um unsichtbare Elemente? ))) Ich meine, es gibt einige Fälle, in javascript, wenn wir brauchen das - aber in reinem CSS?
  • wenn Sie entwickeln ein addon für Firefox macht deine Aussage noch Fragen?
  • Ja, wenn es der Fall ist, Sie wirklich nicht brauchen zu kümmern, wie andere Browser. Ich würde Ihnen vorschlagen, geben Sie dies in Fragen zu, so dass die Leute beantworten können mehr genau.
  • Es tut sich etwas, wenn versteckte Elemente stört das N-te Kind zählen wie gerade und ungerade.

InformationsquelleAutor BrunoLM | 2012-04-17
  1. 7

    Gibt es keine standard-Reine CSS-Regel für die Beurteilung der Sichtbarkeit.

    Wie schon andere gesagt haben, jQuery (wenn Sie wollten, jQuery) hat sowohl eine CSS-Selektor-Erweiterung :visible und die Fähigkeit zur Ausführung .is(':visible') an jedem beliebigen jQuery-Objekts, um die berechneten Stil auf einem bestimmten DOM-element mit .css("display") oder .css("visibility").

    Es ist nicht besonders einfach in plain javascript, um zu bestimmen, ob ein Objekt sichtbar ist, weil Sie haben, um die computedStyle (Berücksichtigung aller möglichen CSS-Regeln, die möglicherweise Auswirkungen auf das element), und Sie müssen sicherstellen, dass keine übergeordneten Objekte sind ausgeblendet, wodurch das Kind-element ausgeblendet werden. Dies ist eine Funktion, die ich in meiner persönlichen Bibliothek:

    //----------------------------------------------------------------------------------------------------------------------------------
//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);
};
    InformationsquelleAutor jfriend00
  2. 1

    Dieser sieht aus wie ein :visible Selektor zu mir:
    http://api.jquery.com/visible-selector/

    BEARBEITEN: Sah Ihre javascript tag vor Ihrem 'keine CSS' VORBEHALT.

    Aber das ist ein CSS-Selektor des möglichen.

    InformationsquelleAutor Widor
  3. 1

    Gibt es keine Reine CSS-Dateien Weg, dies zu tun. Als Kirean ist Kommentar schon gesagt, warum würden Sie wollen, um Stil nur sichtbare Elemente? Die unsichtbaren Elemente nicht zeigen, dass Ihr styling sowieso. Wenn Sie nicht möchten, dass das unsichtbare element "Raum" (alias angelegt), sollten Sie display: none;

    Wenn Sie WIRKLICH wollen ein-Selektor wählen Sie die sichtbaren Elemente, die Sie tun könnten, was Widor vorgeschlagen und jQuery verwenden. Könnten Sie zuerst jQuery verwenden, wählen Sie zunächst die sichtbaren Elemente, fügen Sie eine Klasse zu Ihnen, dann verwenden Sie CSS, um die Elemente auswählen, die von dieser Klasse.

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


.visibleElement {
  color: red;
}
    InformationsquelleAutor ming_codes
  4. 1

    Gibt es keine Möglichkeit, wählen Sie unsichtbare Elemente, mit reinen CSS -

    http://www.w3.org/TR/selectors/

    Allerdings, wenn Sie einen Klassennamen oder eine andere Selektor, mit jquery können Sie etwas wie die folgende

    jQuery(selector).each(function(){
    Var $this=$(this);
    if ($this.css('visibility')==='hidden')
       //set your style
})

    Edit: nach deinem edit, es gibt definitiv keine Möglichkeit der Auswahl, was in den viewport mit CSS allein. Es ist eine Kontext-freie Sprache des möglichen.

    Jedoch, Sie können immer täuschen um mit einem Elemente offset-position mit jquery und festzustellen, ob es innerhalb der aktuellen viewport(Fenster.scrollposition oder so ähnlich). Diese Art von Lösung wird schnell chaotisch, wenn.

    • Wie in anderen Lösungen, es ist ein einfacher Weg, dies zu tun.
    InformationsquelleAutor Thomas Jones
  5. 0

    Wenn Sie bereits mit jQuery, da gibt es eine Viewport plugin, das Ihnen erlaubt zu wählen, was in dem Ansichtsfenster mit einem css-Selektor. Es ist definitiv kein reines CSS, aber scheint zu sein, die nächste Lösung im moment (wieder, vorausgesetzt, Sie sind OK mit der Verwendung von jQuery). Sie würde wahrscheinlich so etwas wie:

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

    Hoffentlich gibt es irgendwann eine native CSS-alternative.

    InformationsquelleAutor redbmk
Schreibe einen Kommentar