Question

使用background设置img时。

您可以按类别更改img

<img class=".png" style="background: url('test.png');">

.png{
    background: url('test2.png');
}

但是，当使用src时，是否可以按类别更改img？

<img src="test.png">

我认为可以通过javascript来更改src，但是如果我可以按类对事物进行排序，则更好。

有可能吗？

Answer 1

是的，您可以使用HTML和一些JavaScript进行此操作（自从您标记了jQuery之后，我将在这里使用jQuery）。

首先，您应该将要使用JavaScript定位的类添加到要更改的img元素中。

然后使用jQuery定位他们，并将其src属性更改为您想要更改的属性。

HTML

<img class="png" src="test.png">

JavaScript

// use jQuery to select all elements with the png class - and set the src attribute to...
jQuery('.png').attr('src', 'test2.png');

Answer 2

在您的示例中，背景不会改变，因为内联样式具有最高优先级）
证明：

.png{
  width: 170px;
  height: 170px;
  background-image: url('another.png');
}

<div class="png" style="background-image: url('https://gyazo.com/f850be7e9fc91aa2c8cb844603ea1e10.png');"></div>

您可以将完全透明的png图像设置为src，并使用其背景：

.set-bg {
  width: 320px; /* have to set exact sizes*/
  height: 320px;
  background-image: url('https://i.gyazo.com/fe48322c44d1c214ee8d9ba49876a0da.png');
}

<img src="invis.png" class="set-bg">

此外，您可以使用JavaScript更改（设置）src。用法：

setSrcByClass("bubu", "https://gyazo.com/c708f879e56f725318fafca74b9cbe7f.png");

function setSrcByClass(className, src){
  let elems = document.querySelectorAll("." + className);
  for( let i = 0; i < elems.length; i++ ){
    elems[i].src = src; // src must be a full adress
    
   // or, if you want to set a relative adress...
   // elems[i].setAttribute('src', src);
  }
}

<img class="bubu">
<img class="bubu">
<img class="bubu">

Answer 3

我认为这是一种方式：

$("img[src='test.png'").attr("src","http://4.bp.blogspot.com/-FLnjwm6youQ/UUGhQei8KqI/AAAAAAAAAUE/nEl-5V5IcDw/s30-p/1.jpg");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="test.png">

$("img[src='test.png'").attr("class","test_img");

.test_img{padding:30px;background: #dae9bc;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="test.png">
<img src="test.png">

对不起，我无法完全理解您的问题，这就是为什么我写了两个摘要

根据类更改img src

3 个答案: