Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 16:00:01
Original
1394 people have browsed it

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>
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template