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程序设计有所帮助。
作者最新文章
JavaScript零基础入门:从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript:void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化:FormData与URLSearchParams用法详解
2026-11-03 23:13:21
