如何使用 css 修改附加了 javascript 的图像？答案

【问题标题】：How can I modify with css an image appended with javascript?如何使用 css 修改附加了 javascript 的图像？
【发布时间】：2016-11-14 16:50:21
【问题描述】：

我使用如下所示的函数添加了带有 JavaScript 的图像：

function show_image(src) {
  var img = document.createElement("img");
  img.src = src;
  document.body.appendChild(img);
}

现在当我尝试在 CSS 中修改它的样式时：

    img{
     //style attributes etc.
}

图片没有反应。我该如何解决这个问题？

【问题讨论】：

样式会起作用。在您的情况下什么不起作用？
重绘后，CSS 属性将应用于普通浏览器中的元素。检查元素检查它的样式。
请添加一个 jsfiddle 或发布您添加的样式
嗨，我设法通过使用 Class 来解决问题，如下所示。谢谢。

标签： javascript jquery html css image

【解决方案1】：

在 javascript 中更改 CSS 将帮助您获得解决方案：

在你的函数中添加 css：

    function show_image(src) {
      var img = document.createElement("img");
      img.src = src;
      document.body.appendChild(img);
      $(document).find(img).css(here add your styles);
    }

示例：$(你的元素).css("color", "red");

REFERENCE

【讨论】：

【解决方案2】：

使用css的样式应该没有问题。但是，如果他们给您带来问题，您可以在 javascript 中应用样式/类。

【讨论】：

这没什么用。它不会为问题提供任何新信息

【解决方案3】：

为该图像分配一个类名

function show_image(src) {
  var img = document.createElement("img");
  img.src = src;
  img.className = "some-class-name";
  document.body.appendChild(img);
}

然后在你的 CSS 中，像往常一样编写选择器

.some-class-name {
    color: #fff;
}

【讨论】：

添加 className 并没有更好的效果。即使没有类，样式也应该可以工作。