JS压扁和拉伸图片


<meta charset="UTF-8">
<title>JS压扁和拉伸图片</title>


<button id="btn1">压扁</button>
<button id="btn2">拉伸</button>
<hr>
<img id="img1" src="../img/banner1.jpg" style="width:720px; height:322px;">


<script type="text/javascript">
(function(){
//////////////////////
    var btn1=document.getElementById('btn1');
    var btn2=document.getElementById('btn2');
    var img1=document.getElementById('img1');
    var w;
    btn1.onclick=function(){
        //alert(img1.style.width);
        w=img1.style.width.replace('px','');
        w=parseInt(w);
        w-=20;
        img1.style.width=w+'px';
    }
    btn2.onclick=function(){
        w=img1.style.width.replace('px','');
        w=parseInt(w);
        w+=20;
        img1.style.width=w+'px';
    }
//////////////////////
})();
</script>



程序运行结果如下,点击这里亲自运行看看