---恢復內容開始---
最近在學習CSS/JS的樣式，兩個合學習一起學習，加深JS的書寫和了解。
一、通過Javasript修改圖片大小
通過函數來傳遞圖片id，height，width，使用document.ElementByID來控制圖片的大小，也就通過id 控制圖片，之前有學過一句document.getElementByTagName('img')[0]，這里也可以通過這種方式來設定固定的圖片。
在前一篇有寫過如何寫這個圖片的樣式，在圖片的基礎加上能夠放大以及回放圖片，先來看看這個的分段JS代碼介紹
1 var status = true;//狀態設置 2 function changeSize(imge,height,width) 3 { 4 var imgH =height; //獲取圖片的高度 5 var imgW =width; //獲取圖片的寬度 6 if(status){ 7 //圖片為正常狀態,設置圖片寬高為現在寬高的2倍 8 status = false;//把狀態設為放大狀態 9 document.getElementById(imge).height= imgH*2; 10 document.getElementById(imge).width= imgW*2; 11 }else{ 12 //圖片為放大狀態,設置圖片寬高為現在寬高的二分之一 13 status = true;//把狀態設為正常狀態 14 document.getElementById(imge).height=imgH/2; 15 document.getElementById(imge).width= imgW/2; 16 } 17 changeStyle();//修改div樣式的函數 18 19 }
第一個函數changeSize為獲取 id,width,height.在判斷狀態那里，status設置true為初始態，進入if,先將status 設置為放大狀態，通過document.ElementById().height/width來控制圖片縮放。
二、通過JS修改CSS樣式
學習了四種如何修改CSS樣式，第四種外聯樣式，因為我覺得較少使用所以就沒有插入進來學習，其他三種都有放進來，同時學習了解。
1 function changeStyle() { 2 var obj = document.getElementById('change'); 3 if(status){ 4 // obj.setAttribute("class", "polaroid"); 5 // obj.style.width= "250px"; 6 obj.style.cssText="width:250px;"; 7 }else{ 8 // obj.setAttribute("class", "polaroid1"); 9 // obj.style.width= "500px"; 10 obj.style.cssText="width:500px;"; 11 12 } 13 }
在上面展示的三種中，第一種要寫兩個CSS樣式，因為它是直接替換掉一整個class，而二三種比較便利，直接替換其中一個樣式。
事實上這兩個函數是可以整合在一起的，但是為了方便了解那部分是什么作用，我在學習過程種就分開寫了，但是寫代碼就要不斷的優化。
附錄完整代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>change photo</title> 6 <style type="text/css"> 7 body 8 { 9 margin:30px; 10 background-color: #E9E9E9; 11 text-align: center; 12 } 13 14 div.polaroid 15 { 16 width:250px; 17 padding:10px 10px 20px 10px; 18 border:1px solid #BFBFBF; 19 box-shadow: 2px 2px 3px #aaaaaa; 20 21 } 22 div.polaroid1 23 { 24 width:500px; 25 padding:10px 10px 20px 10px; 26 border:1px solid #BFBFBF; 27 box-shadow: 2px 2px 3px #aaaaaa; 28 29 } 30 31 32 </style> 33 </head> 34 <body align="center"> 35 36 <div id="change" class="polaroid "> 37 <img id="first" src="C:\Users\12078\Desktop\11.jpg" alt="" width="250px" height="200px" onclick="changeSize(id,height,width); "> 38 <p >遠方.</p> 39 </div> 40 41 <script type="text/javascript"> 42 var status = true; 43 function changeSize(imge,height,width) 44 { 45 var imgH =height; //獲取圖片的高度 46 var imgW =width; //獲取圖片的寬度 47 if(status){ 48 //圖片為正常狀態,設置圖片寬高為現在寬高的2倍 49 status = false;//把狀態設為放大狀態 50 document.getElementById(imge).height= imgH*2; 51 document.getElementById(imge).width= imgW*2; 52 }else{ 53 //圖片為放大狀態,設置圖片寬高為現在寬高的二分之一 54 status = true;//把狀態設為正常狀態 55 document.getElementById(imge).height=imgH/2; 56 document.getElementById(imge).width= imgW/2; 57 } 58 changeStyle(); 59 60 } 61 function changeStyle() { 62 var obj = document.getElementById('change'); 63 if(status){ 64 65 obj.style.cssText="width:250px;"; 66 }else{ 67 68 obj.style.cssText="width:500px;"; 69 70 } 71 } 72 </script> 73 74 </body> 75 </html>