Расширенный селектор CSS - выбор на основе стилей

Помимо проблем с производительностью, возможно ли использовать стиль в качестве селектора? Например, что-то вроде:

div[background-image="img/someimg.jpg"] {opacity:.5}

Мой запасной план состоит в том, чтобы использовать javascript и выполнять итерации по div (добавляя класс, когда он найден), но это может оказаться еще более дорогим, учитывая, что страница очень динамична, и я не контролирую добавляемые div.

Источник

3 ответа

Решение

Со страницы W3C по атрибутам:

CSS 2.1 позволяет авторам определять правила, которые соответствуют элементам, которые имеют определенные атрибуты, определенные в исходном документе.

Атрибуты - это вещи, определенные из самого кода HTML, например id, class, src, href, так далее.:

<a id="foo" href="bar">Foo</a>

Если вы не определили стиль изнутри style атрибут, как это:

<div style="background-image: url('img/someimg.jpg');">Foo</div>

Вы ничего не можете сделать с CSS.

Если вы сделали это встроенным, вы можете попробовать этот селектор:

div[style="background-image: url('img/someimg.jpg');"]
{
  /* ... */
}

Теперь, когда вы беспокоитесь о производительности, вы можете попробовать использовать pure-JS для этого (не проверено):

var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++)
{
  var current = divs[i];

  if (current.style.backgroundImage == "url('img/someimg.jpg')")
  {
    current.style.opacity = 0.5; // You'll need more hacks for IE...
  }
}
Источник

Даже если есть много стилей, вы можете сделать это, используя звездочку, как показано здесь, поэтому этот код:

div[style*="box-sizing: border-box;"] {
   background-color: #ffffe0;
}

легко соответствует этому HTML:

<div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, " courier="" new",="" monospace;="" font-size:="" 12px;="" color:="" rgb(51,="" 51,="" 51);="" border-top-left-radius:="" 4px;="" border-top-right-radius:="" border-bottom-right-radius:="" border-bottom-left-radius:="" background-color:="" rgb(251,="" 250,="" 248);="" border:="" 1px="" solid="" rgba(0,="" 0,="" 0.14902);="" background-position:="" initial="" initial;="" background-repeat:="" initial;-en-codeblock:true;"=""><div><font style="font-size: 14px;"><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(54, 86, 138);">func</span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);"> doThis(thing: </span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(195, 89, 0);">AnyObject</span><span style="line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);">) {</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">}</span></font></div>
<div><font style="font-size: 14px;"><br></font></div>
<div><font style="font-size: 14px;"><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(54, 86, 138);">func</span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);"> doThisThing(thing thing: </span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(195, 89, 0);">AnyObject</span><span style="font-variant-caps: normal; line-height: normal; font-family: Monaco; font-variant-ligatures: no-common-ligatures; color: rgb(0, 0, 0);">) {</span><span style="color: rgb(0, 0, 0); font-family: Monaco;">}</span></font></div></div>
Источник

В этом случае я бы предложил манипулировать CSS-классами, а не отдельными стилями. Например:

div.some-img
{
    background-image: url('img/someimg.jpg');
}

div.some-img-fade
{
    opacity: 5;
}

......

$('div.some-img').each(function() { $(this).addClass('some-img-fade'); });
Источник

Есть что-то под названием DOMSubtreeModified, которое теперь превратилось в MutationObserver. Это может помочь вам следить за тем, когда добавляются новые элементы:

// identify an element to observe
var elementToObserve = document.querySelector("#targetElementId");

// create a new instance of `MutationObserver` named `observer`, 
// passing it a callback function
var observer = new MutationObserver(function() {
    console.log('callback that runs when observer is triggered');
});

// call `observe` on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {subtree: true, childList: true});

Этот пример скопирован / вставлен из документации mdn: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

Источник
Другие вопросы по тегам