Question

我有一个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：background-image。对于div1，我可以这样做：

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

我如何与div2类似？我想要这样的东西：

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

就我而言（由于某些原因），我无法使用ID或Class名称。我的问题是：

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

Answer 1

不知道这是否足够，但您可以使用jQuery以某种方式做某事

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

问题是如果你只使用url()，它仍会显示＆＃34; present＆＃34; ，虽然我还没有看到{{1}仅使用background-image的。如果您想知道我使用url()作为比较的原因，您可以尝试提醒none。

Javascript风格

＆＃13;

$("#id2").css("background-image")

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

你不能只使用css，你必须使用javascript或jquery。这里为你在jquery中css()是有用的

请参阅以下示例。

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

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

Answer 4

这是一种使用vanilla Javacript在没有jQuery的情况下完成它的方法。

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

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/

Answer 5

选择没有类和id的div

＆＃13;

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

＆＃13;

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

＆＃13;

具有特定CSS属性的CSS Selector

5 个答案: