這篇文章主要介紹了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程序設計有所幫助。