Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser js pour exploiter les attributs CSS afin d'obtenir l'effet d'expansion et de fermeture des compétences div layer_javascript

WBOY
Libérer: 2016-05-16 16:00:01
original
1392 Les gens l'ont consulté

L'exemple de cet article décrit comment utiliser js pour utiliser les attributs CSS afin d'obtenir l'effet d'expansion et de fermeture des couches div. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

J'ai récemment appris JavaScript et suis entré en contact avec les opérations JS sur les propriétés CSS, j'ai donc écrit un effet d'expansion et de fermeture, et en même temps réalisé le changement de texte des boutons, ce qui est très simple ! Cet objet Js exploite les attributs CSS pour obtenir l'effet d'expansion et de fermeture de la couche div. Partagez le code avec les concepteurs front-end JS.

<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>
Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal