Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.11.2024, 23:12
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 47

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 див.
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2024, 00:04
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

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

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

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

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

Последний раз редактировалось Aetae, 26.11.2024 в 00:06.
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2024, 00:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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>
Ответить с цитированием
  #4 (permalink)  
Старый 29.11.2024, 15:03
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 47

Сообщение от рони Посмотреть сообщение
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от tp-20
а как записать это же в jquery?
это будет работать и в jquery и без jquery.
Ответить с цитированием
  #6 (permalink)  
Старый 29.11.2024, 17:19
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,222

Сообщение от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

ksa,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Элементы CSS внутри JS DenisZ Общие вопросы Javascript 1 17.12.2022 19:08
Перебрать все элементы внутри одного класса mitrich38 Events/DOM/Window 4 05.07.2016 00:36
как выбрать все элементы <p> с общим родителем mitrich38 Events/DOM/Window 12 04.07.2016 20:59
js-фреймворк, связывающий css классы и dom элементы Danxil Оффтопик 12 30.03.2014 18:41
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37