具有特定 CSS 属性的 CSS 选择器答案

【问题标题】：CSS Selector with specific CSS attribute具有特定 CSS 属性的 CSS 选择器
【发布时间】：2018-02-14 06:32:16
【问题描述】：

我有一个 html 页面：

CSS

#id2{background-image:url(b.png);}

HTML

<div id="id1" style="background-image:url(a.png);"></div>
<div id="id2"></div>

我想选择具有 CSS 属性的 div：背景图像。对于 div1，我可以这样做：

div[style*='background-image']{....something....}

如何使用 div2 进行类似操作？我想要看起来像这样的东西：

div[background-image]{....something.....}

就我而言（由于某些原因），我不能使用 ID 或类名。我的问题是：

在html页面中，有很多div。一些 div 在 style 属性中设置了 background-image，一些 div 在 CSS 文件中设置了 background-image，一些 div 在 style 标签中设置了 background-image。我想选择我们设置背景图像的所有 div。

【问题讨论】：

有没有id2遵循的dom结构？
在html页面中，有很多div。一些 div 在 style 属性中设置了 background-image，一些 div 在 CSS 文件中设置了 background-image，一些 div 在 style 标签中设置了 background-image。我想选择我们设置背景图像的所有 div。
我认为没有纯 CSS 解决方案。但是可以用Javascript实现
JS 也可以。请给我建议如何？
您可以使用 JavaScript 执行此操作并获取计算样式

标签： html css

【解决方案1】：

不知道这是否足够，但您可以使用 jQuery 做一些事情

if ($("#id2").css("background-image") != "none") {
  alert('present');
  //do something if present;
} else {
  alert('absent');
  //do something if absent;
}

#id2 {
  background-image: url('https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id2">aw</div>

这个问题是如果你只使用url()，它仍然会显示“present”，尽管我没有看到任何只使用url() 的background-image。如果你想知道我为什么用none作为比较，你可以尝试提醒$("#id2").css("background-image")。

Javascript 风格

var someElement = document.getElementById("id2");
var currentBackgroundImage = someElement.currentStyle ? someElement.currentStyle.backgroundImage :
                              getComputedStyle(someElement, null).backgroundImage;

if (currentBackgroundImage != "none") {
  alert('present');
  //do something if present;
} else {
  alert('absent');
  //do something if absent;
}

#id2 {
  background-image: url('https://s7d1.scene7.com/is/image/PETCO/cat-category-090617-369w-269h-hero-cutout-d?fmt=png-alpha');
}

&lt;div id="id2"&gt;aw&lt;/div&gt;

【讨论】：

你知道如何在Pure JS中编写如下代码：$("#id2").css("background-image") != "none"。我不想使用任何库，因为增加了我的插件大小。
添加了一个javascript版本

【解决方案2】：

您不能仅使用 css 来执行此操作，您必须使用 javascript 或 jquery。这里对你css() 在 jquery 中很有用

请看下面的例子。

<!DOCTYPE html>
<html>
<head>
<style>
#id2, #id3{background-image:url(b.png);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
       var alldiv = $('div');
       for (i=0;i<alldiv.length;i++){
          if($(alldiv[i]).css("background-image") != "none"){
            $(alldiv[i]).css("background-color","green");
          }       
       }
    });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<div id="id1" style="background-color:#ff0000">This is a paragraph.</div>
<div id="id2" style="background-color:#ff0000">This is a paragraph.</div>
<div id="id3" style="background-color:#ff0000">This is a paragraph.</div>

<button>Return background-color of p</button>

</body>
</html>

编辑：应用于所有 div

【讨论】：

【解决方案3】：

您可以使用CSS selector 和一些jquery function 来执行此操作。仅使用 CSS 选择器是不可能的。

if($('#id2').css("background-color")){
    $('#id2').css('color','red');
}

div[style^="background-image"]{color:red}
#id2{background-color:green}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1" style="background-image:url(a.png);">test content</div>
<div id="id2">Test content</div>

【讨论】：

【解决方案4】：

这是一种无需 jQuery 的方式，使用 vanilla Javacript。

使用window.getComputedStyle获取元素样式并检查其background-image是否为none，1乘1。为有背景图像的人添加一个类has-bk-img，然后将您的CSS设置为类@ 987654326@.

var elems = document.querySelectorAll('div');

elems = Array.prototype.slice.call(elems);

elems.map(function(el) {
  var styles = window.getComputedStyle(el);

  var bkImg = styles.getPropertyValue("background-image");

  if (bkImg !== "none") {
    el.classList.add("has-bk-img");
  }
})

演示：https://jsfiddle.net/whrz7976/11/

【讨论】：

【解决方案5】：

选择没有class和id的div

div:nth-child(1) {
    background: red;
}
div:nth-child(2) {
    background: green;
}

<div id="id1">div1</div>
<div id="id2">div2</div>

【讨论】：