Question

我有两张图片说theImg_enabled.gif和theImg_disabled.gif。我需要动态更改img src。我怎么能用css做到这一点？

 <img class="changeImg" src="theImg_enabled.gif" alt="" width="16" height="16" border="0"/>

<style>
    .changeImg {
                      // I need src="theImg_enabled.gif"
    }

    .changeImg.disabled {

                      // I need src="theImg_disabled.gif"
    }
</style>

Answer 1

使用CSS无法做到这一点，您需要使用客户端脚本，例如JavaScript

document.getElementById("my_id").src="URL";

但是如果你有一个元素的背景图片，并且你想在悬停时改变它，你当然可以写一些像

div {
   background-image: url('SRC');
}

div:hover {
   background-image: url('SRC2');
}

Answer 2

你不能用CSS做到这一点（可以用JavaScript完成）。

但是，如果图片不是<img>元素而是显示为其他元素的background-image，则可以通过更改CSS属性（ example来实现。）。

Answer 3

你可以改变img的CSS，但你必须使用javascript。所以在javascript中更改img的src。

Answer 4

如果您在 img src 中设置了值，则无法使用CSS更改它。

解决方案1

//route.js

setupController(controller, model) {
  this._super(controller, model);

  controller.set('bufferedModel', BufferedProxy.create({
    content: model
  });
}

actions: {
  save: {
    this.get('model').save().then(() => {
      bufferedModel.applyBufferedChanges();
    }
  }
}
//template.hbs

//replace

{{model.title}}

//with

{{bufferedModel.content.title}}

解决方案2：

<img class="changeImg" />  
<style>
    .changeImg {
        border:0;
        width:16px;
        height:16px;
        background-image: url('theImg_enabled.gif');
    }
    .changeImg:hover  {
        background-image: url('theImg_selected.gif');        }
</style>

我可以动态更改css中的img src吗？

4 个答案: