JQuery: проверьте, имеет ли элемент атрибут CSS

Есть ли способ проверить родительские элементы и найти первый, у которого есть набор фонов CSS, а затем вернуть это фоновое значение?

Что-то вроде:

var background = $('element').parents().has(css('background'));

UPDATE: Это код, который я сейчас использую:

jQuery.fn.getBg = function(){
    var newBackground = this.parents().filter(function() {
        return $(this).css('background-color').length > 0;
    }).eq(0).css('background-color');
    $(this).css('background-color',newBackground); console.log("new background is: "+newBackground);
};

Ответы

Ответ 1

Если он не установлен, выборка приведет к пустой строке. Отсюда  

var bg = ('element').parents().filter(function() {
    return $(this).css('background').length > 0;
}).eq(0)

ИЗМЕНИТЬ

Некоторые исследования показывают, что css('background') всегда будет давать пустую строку или undefined, в зависимости от браузера. css('background-color') будет правильно возвращать цвет элемента под рукой; но и разные значения для каждого браузера, поэтому трудно проверить (transparent в IE, rgba(0,0,0,0) в firefox/chrome, например, оба являются точными способами указания прозрачности).

jQuery.fn.getBg = function() {
    return $(this).parents().filter(function() {
        // only checking for IE and Firefox/Chrome. add values as cross-browser compatibility is required
        var color = $(this).css('background-color');
        return color != 'transparent' && color != 'rgba(0, 0, 0, 0)';
    }).eq(0).css('background-color');
};

Ответ 2

Я считаю, что правильный способ сделать это - проверить свойство .length.

В вашем случае вы хотите пропустить все свои элементы и проверить первый, который соответствует

.css('background').length != 0

Ответ 3

$('selector').parents().filter(function() { return !!$(this).css('background'); });

Ответ 4

Я бы попробовал что-то вроде этого:

var background = 0;
$('element').parents().each(function() {
  if (!background && ((e = $(this).css('background')).length > 0)) background = e;
});

Не уверен, работает ли это точное if-clause, но каждый() должен сделать трюк. Первый матч заполнит фоновый параметр и игнорирует остальных родителей при прохождении в цепочке.

Изменить: Изменено для правильного разрешения css('background'), которое может испускать пустую строку. Кроме того, each() не передает элемент, а индекс и элемент, таким образом, использует this и отбрасывает все параметры.

Ответ 5

Получить цвет фона элемента или градиент

Я наткнулся на это, поскольку я пытался применить фон к элементам, у которых его не было (фонового градиента или цвета).

Эта функция возвращает значение фонового градиента или цвета фона, если оно есть, и возвращает false, если это не так:

jQuery.fn.getBg = function() {
  var color = $(this).css('background-color');
  var image = $(this).css('background-image');

  if (color != 'transparent' && color != 'rgba(0, 0, 0, 0)') {
    return color;
  }
  if (image != 'none') {
    return image;
  }
  return false;
};

Теперь, если вы просто хотите проверить, имеет ли элемент фон, вы можете сделать это, используя указанную выше функцию:

var curBack = $(this).getBg();
if (curBack) { /* Element has a background */  }
else { /* Element doesn't have a background */ }

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

Ответ 6

Вы можете сделать что-то вроде:

$('#test').parents().has(css('background')).filter(':first');

Надеюсь, это поможет:)