javascript - JS做放大缩小的效果时，JS为什么在HEAD中没效果？
本文介绍了javascript - JS做放大缩小的效果时，JS为什么在HEAD中没效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
先上代码： //我运行的时候会取消掉注释的
<!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这个为什么会没效果（因为大家都说加这个就可以了）
解决方案
作用域的问题，另外说一句你这写法很有问题
这篇关于javascript - JS做放大缩小的效果时，JS为什么在HEAD中没效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
