JavaScript控制CSS实现Div展开与关闭功能

作者:微光时间:2026-10-29 09:34:02浏览:472

本文介绍利用JavaScript操作CSS属性实现Div层的展开与关闭效果。通过获取元素ID,动态修改display属性控制显示状态,并同步切换按钮文字为展开或关闭。代码简洁,适用于前端交互设计参考。

JavaScript控制CSS实现Div展开与关闭功能

本文分享一个使用JavaScript操作CSS属性来实现Div层展开与关闭效果的实例,供读者参考。

在学习JavaScript过程中,通过操作CSS属性实现了Div层的展开与关闭功能,同时完成了按钮文字的切换,代码结构简洁。以下代码展示了如何通过JS对象操作CSS属性来实现Div层的展开与关闭,供前端开发者参考。


<title>js操作div展开关闭</title>
<style>
  #jb51 { border: solid 1px #EEE; 
    background:#F7F7F7; 
    margin:20px; 
    padding:10px; 
    display:none;
    width:300px;    
  }
</style>
<input style="cursor:pointer" onclick="show('jb51');"
type='button' value='展开' id='inp'>
<div id="jb51">本站提供编程源码、网站源码、网页素材、
书籍教程、网站模板、网页特效代码等!</div>
<script>
function show(id){
  var aiin = document.getElementById(id);
  var inp= document.getElementById('inp');
  if(aiin.style.display != 'block'){
    aiin.style.display = 'block';
    inp.value='关闭';
  }else{
    aiin.style.display = 'none';  
    inp.value='展开';
  }
}
</script>

希望本文的内容对JavaScript程序设计有所帮助。

作者最新文章