---恢复内容开始---

最近在学习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  2  3  4     
      5      6     33 34 35 36     
     
      37         
      38         
      
远方.
39     
     
40     41     73 74 75