先上代码: //我运行的时候会取消掉注释的
<!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
还没有定义,导致调用报错,按钮失效。注意通过属性绑定事件的问题:
一周热门 更多>