Форум

tp-20 · #1 (**permalink**) 25.11.2024, 23:12

Есть ли такой селектор/выборка в 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 · #2 (**permalink**) 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'
);

Но делать этого не надо. Это говно.

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

рони · #3 (**permalink**) 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 · #4 (**permalink**) 29.11.2024, 15:03

Сообщение от рони

<script>
 document.querySelectorAll('div').forEach(div => {
  let url = getComputedStyle(div).backgroundImage.includes('url');
  div.classList.toggle('red', url);
 })
</script>

спасибо большое! то, что надо!

а как записать это же в jquery?

рони · #5 (**permalink**) 29.11.2024, 16:43

Сообщение от tp-20

а как записать это же в jquery?

это будет работать и в jquery и без jquery.

ksa · #6 (**permalink**) 29.11.2024, 17:19

Сообщение от tp-20

а как записать это же в jquery?

Сообщение от рони

но если очень хочется )))

<!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>

рони · #7 (**permalink**) 29.11.2024, 17:42

ksa,

Форум

Справочник

Discord чат

Курсы javascript