Блог

Главная - Вопросы по программированию - Получение каждого HTML-объекта с определенным свойством СТИЛЯ

Получение каждого HTML-объекта с определенным свойством СТИЛЯ

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я ищу функцию javascript, которая возвращает каждый элемент в документе, который имеет определенное свойство стиля (например: background-color ). В идеале я хотел бы передать значение в качестве параметра, чтобы оно извлекало только те, свойство которых соответствует этому конкретному значению, но если нет волшебного способа сделать это, достаточно получить каждый объект, обладающий этим свойством, поскольку я мог бы проверить каждого, соответствует ли значение тому, которое я хочу.

Пример:

 <p id="id1" style="color:#DDD"> 
   Hey this is a <b id="id2" style="color:#FFF"> test</b> 
   So <span id="id3" style="background-color:#123"> have a nice 
        <span id="id4" style="color:#DDD">day </span>
      </span>
</p>

В этом случае предположим, что я хотел:

 getElementByCSS('color','#DDD')

он должен возвращать элементы id1 и id4

Я использую jQuery, держу пари, что в библиотеке jQuery должно быть что-то, что упрощает эту задачу, но я открыт для других библиотек или собственного JS-кода, если это необходимо. Я ломал голову, но не могу найти простой способ сделать это, ответ, вероятно, в каком-то вызове jQuery.

Заранее спасибо!

Бруно

РЕДАКТИРОВАТЬ: Исправлена ошибка в примере, благодаря Алексу Р. и mplungjan

Комментарии:

1. Я не думаю, что для этого есть фильтр выбора, но было бы интересно

2. @Бруно, ты имел в виду getElementByCSS('color','#DDD') ?

3. Почему вы хотите это сделать? Это кажется плохой идеей.

4. api.jquery.com/attribute-contains-selector

5. @mplungjan: Это не даст правильных результатов, потому что это будет onyl проверять наличие встроенных стилей в элементах, а не каскадных, установленных CSS.

Ответ №1:

Фильтр выбора jQuery

Фильтры выбора jQuery используются для фильтрации HTML-элементов на основе некоторых критериев. В вашем случае его стили CSS, следовательно, фильтр выбора был бы наиболее подходящим решением. Следующий код может быть хорошей отправной точкой.

 $.extend($.expr[":"], {
    css: function(element, index, meta, stack) {
        // this should be changed to a regular expresion because colours
        // are reported as rgb(r, g, b) which obviously contains commas as well
        var params = meta[3].split(",");
        var val = $(element).css($.trim(params[0])).toLowerCase();
        return val == $.trim(params[1]).toLowerCase();
    }
});

И должен использоваться как:

 $(":css(font-size, 20px)");

Это рабочий пример на JSBin. И для проверки его кода.

Важно: Верхний код не тестировался, но его должно быть легко доработать (например, проверка параметров, преобразование значений и т.д.)

Ответ №2:

Вот у вас есть решение: 

 function getElementByCSS(cssPropertyName, valueToMatch, parentToSearch){
  if(parentToSearch == null) parentToSearch = document;
  $(parentToSearch).find('*').filter(function(){
     return $(this).css(cssPropertyName) == valueToMatch;
  });
}

Используйте это следующим образом:

 $redElements = getElementByCSS("background-color", "red");

Третий параметр ограничивает, внутри какого родительского элемента искать (по умолчанию document , но поиск по всему документу может быть очень медленным, используйте этот параметр с умом)

Надеюсь, это поможет. Приветствия