Как я могу использовать jQuery для обнаружения каждого фонового изображения на веб-странице? - PullRequest
Новая
       10

Как я могу использовать jQuery для обнаружения каждого фонового изображения на веб-странице?

0 голосов
/ 13 декабря 2011

Можно ли использовать jQuery для поиска всех фоновых изображений на странице? Мой первоначальный план состоял в том, чтобы пройти через каждый элемент, используя 

jQuery("*").each(function() { ... });

и затем проверьте, имеет ли каждый элемент свойство, установленное для .css("background-image")

Однако, похоже, это не работает. jQuery("*") не кажется очень производительным.

Есть ли лучший способ?

Ответы [ 3 ]

3 голосов
/ 13 декабря 2011

Это работает для меня: 

   <div style="background-image:url('image1.jpg')">
        <div style="background-image:url('image2.jpg')">
        </div>
   </div>

и jquery: 

   $('*').each(function(i, item) {
       console.log($(item).css('background-image'));
   });

Журнал консоли выводит изображения image1.jpg и image2.jpg соответственно.

И нет, использование селектора * очень, очень медленно.Он буквально проверяет все (даже встроенные элементы, которые очень и очень маловероятно имеют фоновые изображения. Было бы лучше выбрать отдельные типы тегов (например, div) или выполнить поиск по классу или идентификатору. Это будет намного эффективнее, чем селектор *.

Удачи.

1 голос
/ 13 декабря 2011

Хотя я понимаю, что на этот вопрос уже был дан ответ, и он получил принятый ответ, кажется, стоит отметить, что принятое в настоящее время решение будет достоверно информировать вас только о наборе background-image с использованием встроенного styleАтрибут.

для доступа к тем background-image элементам, которые назначены с помощью внешних таблиц стилей, более надежно следующее: 

var elems = document.getElementsByTagName('*'),
    backgrounds = [];

for (var i=0, len=elems.length; i<len; i++){
    if (window.getComputedStyle(elems[i],null).getPropertyValue('background-image') != 'none'){
        backgrounds.push(window.getComputedStyle(elems[i],null).getPropertyValue('background-image'));
    }
}

console.log(backgrounds);

JS Fiddle demo .

1 голос
/ 13 декабря 2011

Вы можете попробовать атрибут , содержащий слово селектор:

$('*[style~="background-image"]')

...