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

前端技术 2023/09/06 JavaScript

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

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

<title>js操作div展开关闭</title>
<style>
  #phpstudy { border: solid 1px #EEE; 
    background:#F7F7F7; 
    margin:20px; 
    padding:10px; 
    display:none;
    width:300px;    
  }
</style>
<input style=\"cursor:pointer\" onclick=\"show(\'phpstudy\');\"
type=\'button\' value=\'展开\' id=\'inp\'>
<div id=\"phpstudy\">phpstudy提供编程源码、网站源码、网页素材、
书籍教程、网站模板、网页特效代码等！</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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/16293

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案