简单的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 returns 一个 NodeList 不是单个 DOM 节点，因此你需要做 getElementsByTagName('img')[0] 例如获取第一个 img，然后应用样式那个元素。

更新

select 所有图片

如果您想 select 所有图像并对其应用样式

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')

returns一个nodelist.

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

document.getElementsByTagName('img')[0]

简单的JS代码错误

Simple JS code bug

javascript

image

onload

tagname

更新

select 所有图片

只有当前加载的图像（我喜欢）