简单的JS代码bug

Question

为什么它不起作用？ ！ 我希望在加载时让图像淡出，我知道这可以通过jQuery完成，但我想知道这段代码中的错误在哪里。

<img src="http://1.bp.blogspot.com/-M03SoTLlJ4k/Vfwvq2dz42I/AAAAAAAAD9I/o-xN8x6HL2Y/s1600-r/Untitled-1%2B%25281%2529.png" onload="loadimage()" id="imageid"/>
<style>
#imageid {
opacity:0;
transition:1s;
}
</style>
<script>
function loadimage(){
document.getElementsByTagName("img").style.opacity="1"
}
</script>

Answer 1

getElementsByTagName返回NodeList而不是单个DOM节点，因此您需要执行getElementsByTagName('img')[0]以获取第一个img，然后在该元素上应用样式。

更新

选择所有图像

如果要选择所有图像并对其应用样式

function loadimage(){
   var imgElements = document.getElementsByTagName('img');
   for(var i=0, l=imgElements.length; i < l; i++) {
      imgElements[i].style.alpha = 1;
   }
}

仅当前加载的图像（我首选）

function loadimage(){
  this.style.alpha = 1;
}

Answer 2

在javascript中，

document.getElementsByTagName('img')

返回nodelist。

如果你想要nodelist中的第一项，你需要写：

document.getElementsByTagName('img')[0]