---恢复内容开始---
最近在学习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>
查看更多关于【css教程】的文章
