How to use js to operate css attributes to achieve the expansion and closing effect of div layer_javascript skills

The example in this article describes how to use js to operate css attributes to achieve the expansion and closing effect of div layers. Share it with everyone for your reference. The specific analysis is as follows:

I recently learned JavaScript and came into contact with JS operations on CSS properties, so I wrote an expand and close effect, and at the same time realized button text switching, which is very simple! This Js object operates css attributes to achieve the expansion and closing effect of the div layer. Share the code with JS front-end designers.

<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>

I hope this article will be helpful to everyone’s JavaScript programming design.