JS做放大缩小的效果时,JS为什么在HEAD中没效果? 财富值68

2016-10-13 23:45发布

5306 7 6

先上代码: //我运行的时候会取消掉注释的

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>08work</title>   <!-- 111     <script>     window.onload = function(){         var imgElement = document.getElementById("outInPic");         imgElement.width=500;         function zoomIn(){             imgElement.width-=100;         }         function zoomOut(){             imgElement.width+=100;         }      }     </script>     --> </head> <body>     <img src="鸣人1.jpg" alt="鸣人" title="漩涡鸣人" id="outInPic" width="300">       <button onclick="zoomIn()">缩小</button>     <button onclick="zoomOut()">放大</button>     <!--  222 <script>     var imgElement = document.getElementById("outInPic");     imgElement.width=500;     function zoomIn(){         imgElement.width-=100;     }     function zoomOut(){         imgElement.width+=100;     }  </script> --> </body> </html> 

百度过后说是浏览器的加载顺序,然后尝试了
window.onload = function(){}
$(document).ready(function){}
结果没什么用..
只有在将js放在body后才有用(主要是 img 后面,在button前面没关系)。

问:到底怎么做才可以让它在head中有效果... window.onload这个为什么会没效果(因为大家都说加这个就可以了)

友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
7条回答

按你的需求,解决方案是在 window.onload 之前定义 zoomInzoomOut。也就是将其放在 window.onload 外面。

75人赞 举报

window.onload 是事件在页面元素渲染完毕后的回调

50人赞 举报

zoomInzoomOut 是在 window.onload 中定义的函数

42人赞 举报

作用域的问题,另外说一句你这写法很有问题

39人赞 举报

在渲染 button 时同时定义了 onclick 属性,这时 zoomInzoomOut 还没有定义,导致调用报错,按钮失效。

32人赞 举报

注意通过属性绑定事件的问题:

29人赞 举报

23人赞 举报

一周热门 更多>