前幾天在慕課網上看到一個關于圖片縮放的教學視頻，因為當時對老師使用img.width,而不是使用img.style.width而感到奇怪，所以周末得空了，想來自己試著寫出來，相關視頻網址如下：http://www.imooc.com/video/1111；

最開始想著按照視頻使用定時器的思路來寫，但是寫到后面發現使用?img.width實現不了效果，然后就按照傳參的思路來寫，同樣使用?img.width實現不了效果，所以后面改用img.style.width；我這等小白在這問題上糾結了好久，簡直是要哭暈在廁所的節奏。

一、 使用img.style.width；

HTML部分比較簡單：但還是需要貼出來，以便于后面說明為什么使用img.width沒有出現效果，（特別注意img標簽中對其寬高的寫法）

1 <div id="div" style="width: 200px;height: 164px;"> 2 <img style="width: 200px;height: 164px;" src="img/child.jpg" id="img" /> 3 </div> 4 <input type="button" name="" id="big" value="放大" /> 5 <input type="button" name="" id="small" value="縮小" />

JS部分

1、使用傳參的方式，因為代碼比較簡單，就直接貼了 ，這里使用的都是.style.width形式

1 window.onload = function() {2 var big = document.getElementById('big');3 var small=document.getElementById('small') 4 big.onclick = function() {5 chang(1.2,2,0.5)6 }7 small.onclick = function() {8 chang(0.8,2,0.5)9 } 10 } 11 function chang(speed,max,min) { 12 var div= document.getElementById('div'); 13 var pic = document.getElementById('img'); 14 var h = pic.offsetHeight; 15 var w = pic.offsetWidth; 16 var maxH=div.offsetHeight*max; 17 var maxW=div.offsetWidth*max; 18 var minH=div.offsetHeight*min; 19 var minW=div.offsetWidth*min; 20 if (h<=maxH&&h>=minH) { 21 pic.style.height = h*speed+"px"; 22 pic.style.width=w*speed+'px'; 23 }else if(h>maxH){ 24 alert('圖片已放到最大') 25 pic.style.height=maxH+"px"; 26 pic.style.width=maxW+"px"; 27 }else{ 28 alert('圖片縮到最小') 29 pic.style.height=minH+"px"; 30 pic.style.width=minW+"px"; 31 } 32 }

2、使用定時器：同樣使用的使用的都是.style.width形式

1 window.onload = function() {2 var big = document.getElementById('big');3 var small = document.getElementById('small')4 big.onclick = function() {5 changBig()6 }7 small.onclick = function() {8 changSmall()9 } 10 var div = document.getElementById('div'); 11 var pic = document.getElementById('img'); 12 var endH = div.offsetHeight * 1.2; 13 var endW = div.offsetWidth * 1.2; 14 var maxH = div.offsetHeight * 2; 15 var maxW = div.offsetWidth * 2; 16 var endH1 = div.offsetHeight * 0.8; 17 var endW1 = div.offsetWidth * 0.8; 18 var minH = div.offsetHeight * 0.5; 19 var minW = div.offsetWidth * 0.5; 20 var changBig=function () { 21 if(pic.offsetHeight <endH ) { 22 if(pic.offsetHeight <maxH) { 23 pic.style.height = pic.offsetHeight * 1.08 + 'px'; 24 pic.style.width = pic.offsetWidth * 1.08 + 'px'; 25 } else { 26 alert('圖片已放到最大') 27 clearInterval(time) 28 } 29 } else { 30 clearInterval(time) 31 } 32 var time = setInterval('changBig()', 200) 33 } 34 var changSmall=function () { 35 if(pic.offsetHeight > endH1 ) { 36 if(pic.offsetHeight >minH) { 37 pic.style.height = pic.offsetHeight * 0.9 + 'px'; 38 pic.style.width = pic.offsetWidth * 0.9 + 'px'; 39 } else { 40 alert('圖片已縮到最小') 41 clearInterval(time) 42 } 43 } else { 44 clearInterval(time) 45 } 46 var time = setTimeout('changBig()', 200) 47 } 48 }

但老師的教學視頻使用的是img.width，并且也有效果啊，為什么我使用img.width就不出現效果呢，在網上找了好久也沒找到什么有關的，所以后面就在控制臺上輸出了他們：

console.log(pic.style.height)；
console.log(pic.offsetHeight)；
console.log(pic.height)；

結果如下：

?

發現console.log(pic.offsetHeight)與console.log(pic.height)的結果一樣；之前知道pic.style.height是可讀可寫的，為字符串，帶有單位像素，而pic.offsetHeight是可讀不可寫的，難道console.log(pic.height)與console.log(pic.offsetHeight)是一樣的？那也不應該啊，以為pic.offsetHeight是可讀不可寫的，如果他們是一樣的，那么老師使用img.width應該也是不能出現效果的，所以他們肯定是不同的，想來他是結合了pic.style.height和pic.offsetHeight，可讀可寫，同時返回的是數字；那為什么我使用img.width就是不出現效果呢，后來猜想可能是HTML書寫方式的不同導致的，所以修改了img標簽內寬高的寫法：如下

1 <div id="div" style="width: 200px;height: 164px;"> 2 <img src="img/child.jpg" id="img" width="200" height="164"/> 3 </div> 4 <input type="button" name="" id="big" value="放大" /> 5 <input type="button" name="" id="small" value="縮小" />

注意img標簽對其寬高屬性的兩種寫法；

然后我把JS部分的pic.style.height改為pic.height，然后效果就出來了，代碼如下：

1 function chang(speed,max,min) {2 var div= document.getElementById('div');3 var pic = document.getElementById('img');4 var maxH=div.offsetHeight*max;5 var maxW=div.offsetWidth*max; 6 var minH=div.offsetHeight*min;7 var minW=div.offsetWidth*min;8 if (pic.offsetHeight<=maxH&&pic.offsetHeight>=minH) { 9 pic.height = pic.height*speed; 10 pic.width=pic.width*speed; 11 }else if(pic.height>maxH){ 12 alert('圖片已放到最大') 13 pic.height=maxH; 14 pic.width=maxW; 15 }else{ 16 alert('圖片縮到最小') 17 pic.height=minH; 18 pic.width=minW; 19 } 20 }

同樣將用定時器寫法中的pic.style.height改為pic.heigh，也出現了效果；代碼就不貼出來了

之前只是懷疑pic.height與pic.offsetHeight是不相同的，那他們到底是否相同呢，然后將pic.heigh均改為pic.offsetHeight，這小效果沒有了，所以這兩者是、本質是不同的，只是他們的數值相同而已；

總結：

1、pic.height，pic.style.height，pic.offsetHeight三者是不同的；

2、pic.height，pic.style.height是可讀可寫的，pic.offsetHeight是可讀不可寫的；

3、pic.height與pic.offsetHeight返回的是數值，且數值相等；

4、pic.style.height返回的是字符串，帶有單位PX;

5、使用pic.height還是使用pic.style.height，根據HTML中編寫標簽內的屬性的方式而定；

最后，對于這個問題，小白的我弄了好久，寫出來為了讓自己影響深刻點，總結的也不全面，后面理解的深了，繼續加吧。fighting！

?

轉載于:https://www.cnblogs.com/xieweikai/p/6837914.html

總結

以上是生活随笔為你收集整理的点击按钮，缩放图片（img.width、img.style.width、img.offsetWidth）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。