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

2016-10-13 23:45发布

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

<!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 外面。

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

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

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

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

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