Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   CSS выбрать все элементы, содержащие фон (https://javascript.ru/forum/xhtml-html-css/86186-css-vybrat-vse-ehlementy-soderzhashhie-fon.html)

tp-20 25.11.2024 23:12
CSS выбрать все элементы, содержащие фон
 
Есть ли такой селектор/выборка в CSS (возможно с помощью jq), который бы выбрал все элементы, содержащие background-image?

Например:
<style>
.div1{background-image:url(image1.png);}
.div4{background-image:url(image4.png);}
.div5{background-image:url(image5.png);}
</style>

<div class='div1'>1</div>
<div class='div2'>2</div>
<div class='div3'>3</div>
<div class='div4'>4</div>
<div class='div5'>5</div>

нужно выбрать все элементы, в которых есть свойство background-image. т.е. в итоге должны быть выбраны 1, 4 и 5 див.

Aetae 26.11.2024 00:04
Нет, css не может создавать правила, которые опираются на значения из правил - это бы приводило к постоянным вечным циклам.

Если же свойство прописано в style самого элемента(<div style='background-image: url(...)'>5</div>) - то можно наговнокодить с помощью селектора атрибутов: div[style*='background-image"].

С помощью js возможно всё. Например можно получить все div и перебрать текущий стиль:
var $divsWithBackgroundImage = $('div').filter(
  (_, el) => getComputedStyle(el).backgroundImage !== 'none'
);
Но делать этого не надо. Это говно.

Твоя задача, какой бы она не была, решается иным способом.

рони 26.11.2024 00:32
tp-20,
мысли сходятся
Цитата:
Сообщение от Aetae
Но делать этого не надо.
согласен ... но если очень хочется ))) 

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
</head>
<body>
    <style>
        .div1 {
            background-image: url(image1.png);
        }
        .div4 {
            background-image: url(image4.png);
        }
        .div5 {
            background-image: url(image5.png);
        }
        .red {
            color: red;
        }
    </style>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
    <div class='div4'>4</div>
    <div class='div5'>5</div>
    <script>
        document.querySelectorAll('div').forEach(div => {
            let url = getComputedStyle(div).backgroundImage.includes('url');
            div.classList.toggle('red', url);
        })
    </script>
</body>
</html>

tp-20 29.11.2024 15:03
Цитата:
Сообщение от рони (Сообщение 556491) 
<script>
 document.querySelectorAll('div').forEach(div => {
  let url = getComputedStyle(div).backgroundImage.includes('url');
  div.classList.toggle('red', url);
 })
</script>
спасибо большое! то, что надо! :thanks:
а как записать это же в jquery?

рони 29.11.2024 16:43
Цитата:
Сообщение от tp-20
а как записать это же в jquery?
это будет работать и в jquery и без jquery.

ksa 29.11.2024 17:19
Цитата:
Сообщение от tp-20
а как записать это же в jquery?
Цитата:
Сообщение от рони
но если очень хочется )))
:write: 
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
</head>
<body>
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        .div1 {
            background-image: url(image1.png);
        }
        .div4 {
            background-image: url(image4.png);
        }
        .div5 {
            background-image: url(image5.png);
        }
        .red {
            color: red;
        }
    </style>
    <div class='div1'>1</div>
    <div class='div2'>2</div>
    <div class='div3'>3</div>
    <div class='div4'>4</div>
    <div class='div5'>5</div>
    <script>
        $('div').each((_, div) => {
            const url = getComputedStyle(div).backgroundImage.includes('url');
            $(div).toggleClass('red', url);
        })
    </script>
</body>
</html>

рони 29.11.2024 17:42
ksa,
:)


Часовой пояс GMT +3, время: 08:39.