本文介绍利用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程序设计有所帮助。