Question

所以我知道交换命名的img标签的图像很容易

<img name="image1" src="" />
<script>document["image1"].src="candybar.jpg";</script>

问题是我被迫使用内容服务器，我无法命名图像标记。

所以如果我命名一个包装图像的Div标签，我可以用它来指定有问题的图像标签吗？

像...这样的东西。

<div id="namedDiv"><img src="" /></div>
<script>
     var imgDiv=document.getElementById['namedDiv'];
     imgDiv.$imgtag$.src="candybar.jpg";
</script>

因为我知道父母，而且里面只有1张图片，我想说“嘿Div，给我你唯一的孩子作为对象”

Answer 1

是的，如下所示：

document.getElementById('namedDiv').getElementsByTagName('img')[0].src = 'mynewpath.jpg';

Answer 2

每个dom节点都有childNodes属性，这是一个节点数组。你可以先选一个。

<script>
     var imgDiv=document.getElementById['namedDiv'];
     imgDiv.childNodes[0].src="candybar.jpg";
</script>

Answer 3

根据标记和浏览器，<img>元素可能不是唯一的子元素。例如，如果有任何空格，例如换行符，那么IE以外的许多浏览器都会创建一个文本节点。

最简单的方法是使用包装器元素的getElementsByTagName方法，该方法返回一个NodeList，并获取该NodeList中的第一个元素：

var div = document.getElementById("namedDiv");
var image = div.getElementsByTagName("img")[0];
image.src = "candybar.jpg";

如果你不介意让它稍微难以理解，你可以缩短它：

document.getElementById("namedDiv").getElementsByTagName("img")[0].src = "candybar.jpg";

但这会让你在犯错误时更难调试; - ）

Answer 4

为什么不使用css样式和精灵来获得相同的结果而不使用javascript。 ????

这个想法：http://www.pixelovers.com/css-sprites-mejora-rendimiento-web-i-37249

我可以解释一下：）

替代意味着使用JavaScript获取图像src

4 个答案: