通过 JavaScript 更改图像？

Question

关于 Javascript 的快速问题。我正在开发一个 Safari 扩展程序来削减 Google 搜索页面，并且我想将 Google 徽标更改为自定义图像。我的计划是在扩展中添加一个注入的 .js 脚本。

到目前为止，我已经尝试过这个：

document.getElementById('img#hplogo').innerHTML = 
"<img alt="Google" height="95" id="hplogo" src="logo3w.png" width="275" 
style="padding-top:136px" onload="window.lol&amp;&amp;lol()">"

为了澄清一些，徽标图像位于 Google 主页上的 ID 下，为“hplogo”，或者根据 Safari Web Inspector，为“img#hplogo”。显然，我想用我自己的 logo3w.png 替换 src，该 logo3w.png 将位于扩展文件夹的根目录中（因此，据我所知，不需要高级目录）。

如果我能在命令方面指出正确的方向，那将非常有帮助，但实际上任何和所有的帮助都是值得赞赏的。谢谢！

Answer 1

您想要执行的操作：

document.getElementById("hplogo").src = "logo3w.png";

请注意，“img#hplogo”并不是说 img 元素的 id 是“img#hplogo”，而是说您正在查看“img”元素其 ID 为“hplogo”。因此，当使用 document.getElementById() 时，您只需要传递“hplogo”即可。在 CSS 中，您可能会说：

img #hplogo {
    display: none;  //or whatever
}
#hplogo {
    display: none;  //or whatever
}

类似地，对于像 jQuery 这样支持 CSS 样式元素选择器的东西，您可能会说：

var image = $("#hpLogo");
var theSameImage = $("img #hplogo");

但是对于 document.getElementById() ，您需要传递的所有内容（以及您可以传递的所有内容）是“hp标志”。

Answer 2

您可能想要更改图像的 src 属性：

document.getElementById('img#hplogo').src = 'path/to/your/image.jpg'

Answer 3

更改“innerHTML”属性会更改内部 HTML，而不是元素本身。您要做的就是找到该元素并更改它的“src”属性。