JS: выделение всех запросов относительно z-индекса

#javascript #css #z-index

#javascript #css #z-индекс

Вопрос:

Я хотел бы выбрать все элементы «div», которые являются дочерними элементами «body» и имеют свойство z-index: 2, установленное.

документ.Выбор запроса(‘body > div’);

Как мне включить проверку z-index для этого выбора запросов?

1. почему бы просто не выполнить итерацию по div элементам, проверяя их свойство zIndex?

2. Это то, чем я сейчас занимаюсь, мне просто хотелось бы знать наилучшее решение.

Ответ №1:

Я считаю, что вы не можете включить «z-index» в селектор, потому что нет синтаксиса CSS-селектора для выбора элементов на основе атрибутов стиля CSS.

Что вы могли бы сделать, так это создать свой стиль «z-index: 2», присвоив элементам определенный класс. Затем вы могли бы использовать класс в своем селекторе («body > div.zIndex2» или что-то еще).

1. Спасибо за ответ, я просто не хотел добавлять новый код, поскольку я уже различаю, какие «divs» я хотел бы иметь, используя z-index: 2 (который также служит для некоторой анимации в моем коде).

2. Если z-index находится непосредственно в атрибуте «style», то вы могли бы создать селектор для проверки самого атрибута «style» — это может быть неаккуратно, и мне это кажется довольно хрупким.

3. это что-то вроде ‘body > div[style= … etc?

4. Да, однако это, вероятно, довольно близко к пределу того, что браузеры смогут делать. Я не знаю, есть ли хорошая поддержка ограниченного сопоставления с шаблоном в стиле jQuery, или это даже часть спецификации CSS3. Хотя, возможно, это так. Удачи!

Ответ №2:

Я бы, вероятно, использовал jQuery для подобного выбора и пользовательский селектор, подобный:

 $.expr[':'].zIndex = function(obj) {
   if ($(obj).css('z-index')==2) return true;
   else return false;
}

Затем вызовите с:

 $('body div:zIndex')

но для этого вам понадобится jQuery, а я его не тестировал

1. Спасибо, но я намеренно избегал jQuery с самого начала.

2. В этом случае я подозреваю, что первый комментарий, который вы уже делаете, является лучшим ответом, поскольку я подозреваю, что это все, что jQuery делает с селекторами.