先上代码: //我运行的时候会取消掉注释的
<!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这个为什么会没效果(因为大家都说加这个就可以了)
付费偷看金额在0.1-10元之间
按你的需求,解决方案是在
window.onload之前定义zoomIn和zoomOut。也就是将其放在window.onload外面。window.onload是事件在页面元素渲染完毕后的回调zoomIn和zoomOut是在window.onload中定义的函数作用域的问题,另外说一句你这写法很有问题
在渲染
button时同时定义了onclick属性,这时zoomIn和zoomOut还没有定义,导致调用报错,按钮失效。注意通过属性绑定事件的问题:
一周热门 更多>