Есть ли селектор CSS:visible (прокрутка)?

Я хочу изменить стиль видимых элементов, используя только CSS. Есть ли селектор, который это делает? Он должен работать только с Chrome и Firefox. (Я создаю расширение / аддон)

Если нет, есть ли способ изменить стиль видимых элементов с помощью легкого javascript?

видны в текущей позиции прокрутки. Элемент может быть вне поля зрения прокрутки или частично видимым.

10
css css3 javascript

5 ответов

нет стандартного правила чистого CSS для оценки видимости.

как говорили другие, jQuery (если вы хотите использовать jQuery) имеет оба расширение селектора CSS :visible и возможность выполнения .is(':visible') на любом заданном объекте jQuery, чтобы получить вычисляемый стиль на любом заданном элементе DOM с .css("display") или .css("visibility").

в обычном javascript не так просто определить, является ли объект видимым, потому что вам нужно получить computedStyle (to примите во внимание все возможные правила 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);
};
7

это выглядит как :visible селектор для меня: http://api.jquery.com/visible-selector/

редактировать: видел твою javascript тег перед вашей оговоркой "нет CSS".

но это своего рода селектор CSS.

3

нет чистого CSS-способа сделать это. Как уже говорилось в комментарии Киреана, почему вы хотите создавать только видимые элементы? Невидимые элементы все равно не покажут свой стиль. Если вы не хотите, чтобы невидимый элемент занимал место (он же, выложенный), вы должны использовать display: none;

Если вам действительно нужен селектор для выбора видимых элементов, вы можете сделать то, что предложил Widor, и использовать jQuery. Сначала вы можете использовать jQuery для первого выбора видимых элементов, добавления класса в затем используйте CSS для выбора элементов по этому классу.

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


.visibleElement {
  color: red;
}
1

невозможно выбрать невидимые элементы, используя чистый CSS

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

однако, если у вас есть имя класса или другой селектор, используя jquery, вы можете сделать что-то вроде следующего

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

Edit: после редактирования определенно нет способа выбрать то, что находится в окне просмотра только с помощью CSS. Это своего рода контекстно-свободный язык.

тем не менее, вы всегда можете дурачиться с элементы смещают позицию с помощью jquery и определяют, находится ли она в текущем окне просмотра(window.scrollposition или что-то подобное). Однако этот тип решения быстро запутывается.

1

Если вы уже используете jQuery, то есть окно просмотра плагин, который позволяет выбрать то, что в окне просмотра с помощью селектора css. Это определенно не чистый CSS, но, похоже, самое близкое решение на данный момент (опять же, если вы в порядке с использованием jQuery). Вы, вероятно, придется сделать что-то вроде:

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

надеюсь, что в конечном итоге будет собственная альтернатива CSS.

1