JS笔记一：动态修改css样式

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

最近在学习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="250px;";
 7                }else{
 8                    // obj.setAttribute("class", "polaroid1"); 
 9                   // obj.style.width= "500px";
10                   obj.style.cssText="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:Users12078Desktop11.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="250px;";
66                }else{
67                    
68                   obj.style.cssText="500px;";
69 
70                }   
71         }
72     </script>
73 
74 </body>
75 </html>