js操作css属性实现div层展开关闭效果的方法

这篇文章主要介绍了js操作css属性实现div层展开关闭效果的方法,涉及javaScript操作css样式实现div弹出层的效果,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js操作css属性实现div层展开关闭效果的方法。分享给大家供大家参考。具体分析如下：

最近学javascript接触到js对css属性操作，就写了个展开关闭效果，同时实现了按钮文字切换，很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果。将代码分享给JS前端设计者。

1. <title>js操作div展开关闭</title> 
2. <style> 
3. #jb51 { border: solid 1px #EEE;  
4. background:#F7F7F7;  
5. margin:20px;  
6. padding:10px;  
7. display:none; 
8. width:300px;  
9. } 
10. </style> 
11. <input style="cursor:pointer" onclick="show('jb51');" 
12. type='button' value='展开' id='inp'> 
13. <div id="jb51">武林网提供编程源码、网站源码、网页素材、 
14. 书籍教程、网站模板、网页特效代码等！</div> 
15. <script> 
16. function show(id){ 
17. var aiin = document.getElementById(id); 
18. var inp= document.getElementById('inp'); 
19. if(aiin.style.display != 'block'){ 
20. aiin.style.display = 'block'; 
21. inp.value='关闭'; 
22. }else{ 
23. aiin.style.display = 'none';  
24. inp.value='展开'; 
25. } 
26. } 
27. </script> 

希望本文所述对大家的javascript程序设计有所帮助。