Найти блоки по css свойству

153

02 января 2020, 01:00

Возникла необходимость с помощью jquery найти все блоки на странице, у которых в стилях есть background. Есть идеи как это сделать?

Answer 1

В самом jquery такой возможности нет, однако можно перебрать все элементы на странице и проверить наличие у них css свойства background.

$('*').each(function(){
    var element = $(this);
    if (element && element.css('background') && element.css('background') !== 'none'){
     console.log(element);
    }
});

соответственно в консоль упадут все элементы с непустым свойством background. jquery пустые свойства возвращает как 'none'

Answer 2

$('.searchBG > div').each(function(){ 
  let isBackground = $(this).css('background-color'); 
  if(isBackground != 'rgba(0, 0, 0, 0)') 
  console.info($(this).attr('class')+' = '+isBackground); 
});

.searchBG > div { 
  display: inline-block; 
  width: 50px; 
  height: 50px; 
} 
 
.bla-1-bla { 
  background: green; 
} 
.bla-s-bla { 
  background: red; 
} 
 
.a2a-bla-bla { 
  background: transparent; 
} 
 
.sd-bla-bla { 
  background: blue; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="searchBG"> 
  <div class="bla-bla-bla"></div> 
  <div class="bla-1-bla"></div> 
  <div class="a2a-bla-bla"></div> 
  <div class="bla-bla-3"></div> 
  <div class="ddsd-bla-bla"></div> 
  <div class="bla-s-bla"></div> 
  <div class="bla-ase-asd"></div> 
  <div class="sd-bla-bla"></div> 
</div>

Answer 3

Если речь про поиск бэкграунд-картинок то можно вот так:

обратите внимание на Window.getComputedStyle() это нативный аналог jquery метода .css()

он возвращает эффективный стиль элемента, а не то, что вписано в инлайн стиль

$('*').filter(function(){ 
   return ~getComputedStyle(this).background.indexOf('url(') 
}).each(function(){ 
  console.log(this) 
})

.with_bg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP5JREFUeNpi/P//PwMlgImBQjDwBrCgC9jPfQGmGRkZZwIJY4b//88CwykdJHYwWYKwC37/+gXGv37+NI5yFzMG0TAxolzw4dUrBg5ubjD7DVDPj69fwWwILUfYgK+fPgJt/8HAysbOcB+o5/uXL0DbfzL8/vmTuED8/+//TKDiM98+f2J4CDQARIP4IHGiDPjx7dvhb58+M1jEOhs//MbAoBPpbAzig8SxOgGUEpExl1EEA6dzTQx35JIzOgf//wfRID5IHF0tOBVjCECAArNJagmL/6wzIBrI1wFiNmwGMKLnBWD8gygBIOZCEv4DxG+Bav+i+4Bx6GcmgAADAAiPsgkULyM8AAAAAElFTkSuQmCC)}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="with_bg">1</div> 
<div class="no_bg">2</div> 
<div class="with_bg">3</div> 
<div class="no_bg">4</div>

Вот чисто на Jquery:

$('*').filter(function(){ 
   return ~$(this).css('background').indexOf('url('); 
}).each(function(){ 
  console.log(this) 
})

.with_bg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP5JREFUeNpi/P//PwMlgImBQjDwBrCgC9jPfQGmGRkZZwIJY4b//88CwykdJHYwWYKwC37/+gXGv37+NI5yFzMG0TAxolzw4dUrBg5ubjD7DVDPj69fwWwILUfYgK+fPgJt/8HAysbOcB+o5/uXL0DbfzL8/vmTuED8/+//TKDiM98+f2J4CDQARIP4IHGiDPjx7dvhb58+M1jEOhs//MbAoBPpbAzig8SxOgGUEpExl1EEA6dzTQx35JIzOgf//wfRID5IHF0tOBVjCECAArNJagmL/6wzIBrI1wFiNmwGMKLnBWD8gygBIOZCEv4DxG+Bav+i+4Bx6GcmgAADAAiPsgkULyM8AAAAAElFTkSuQmCC)}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="with_bg">1</div> 
<div class="no_bg">2</div> 
<div class="with_bg">3</div> 
<div class="no_bg">4</div>