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

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

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

• zoomIn 和 zoomOut 是在 window.onload 中定义的函数

• 在渲染 button 时同时定义了 onclick 属性，这时 zoomIn 和 zoomOut 还没有定义，导致调用报错，按钮失效。

• 按你的需求，解决方案是在 window.onload 之前定义 zoomIn 和 zoomOut。也就是将其放在 window.onload 外面。

这是因为浏览器加载html页面，是从上到下一行一行加载渲染的。在load的时候，js在前面，outInPic这个id元素还没有，所以放head里时imgElement是为null的

<script>
    var imgElement = null;//全局
    window.onload = function(){
        imgElement = document.getElementById("outInPic");
        //console.log(imgElement);
        imgElement.width=500;
    }
    function zoomIn(){
        imgElement.width-=100;
    }
    function zoomOut(){
        imgElement.width+=100;
    }
    </script>

把zoomIn和zoomOut两个函数放window.onload函数外，imgElement变量定义成全局

你把 zoomIn() 和 zoomOut() 定义在 window.onload() 里面的话，他们是局部函数，全局访问不到，包括 button 元素的 onclick 事件处理器属性也无法访问。如果要把它放在 head 里面的话一个可能可以的办法是

window.onload = function(){
    var imgElement = document.getElementById("outInPic");
    imgElement.width = 500;
    window.zoomIn = function zoomIn() {
        imgElement.width -= 100;
    };
    window.zoomOut = function zoomOut() {
        imgElement.width += 100;
    };
};