Question

我写了一个小javascript，当用户点击它时，它应该会改变我网页上所有图像的大小。但是当我尝试运行它时，我发现了一个错误。

<script  type="text/javascript">

function changeSize(img){

var bigsize = "800"; 
var smallsize = "500"; 

  if(img.height == bigsize) img.height = smallsize;
  else img.height = bigsize;
  }
var element = document.getElementsByTagName("img");
element.addEventListener('click',changeSize(this),false  );
</script>

我做错了什么？

Answer 1

在changeSize中以event.target访问您的img，同时调用错误的addEventListener，请参阅下面的代码段，因为很多代码已更新：

工作代码段，您可以在点击图片后看到图片边框已更改。

＆＃13;

function changeSize(event){

var bigsize = "800"; 
var smallsize = "500"; 

  if(event.target.height == bigsize) event.target.height = smallsize;
  else event.target.height = bigsize;
  }

var elements = document.getElementsByTagName ("img");

for (var i = 0; i < elements.length ; i++) {
    elements[i].addEventListener("click", 
        changeSize, 
        false);
}

＆＃13;

img{
border: 1px solid black;
}

＆＃13;

<img onclick="changeSize(event)" width='30' height='40'/>

<img width='30' height='40'/>
<img width='30' height='40'/>
<img width='30' height='40'/>

＆＃13;

addEventListner到多个图像

1 个答案: