javascript - 简单的 JS 代码错误

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]