Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie js zum Bedienen von CSS-Attributen, um den Erweiterungs- und Abschlusseffekt der div-layer_javascript-Fähigkeiten zu erzielen

So verwenden Sie js zum Bedienen von CSS-Attributen, um den Erweiterungs- und Abschlusseffekt der div-layer_javascript-Fähigkeiten zu erzielen

WBOY
WBOYOriginal
2016-05-16 16:00:011396Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie mit js CSS-Attribute bedient werden, um den Erweiterungs- und Schließeffekt von div-Ebenen zu erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Ich habe kürzlich JavaScript gelernt und bin mit JS-Operationen für CSS-Eigenschaften in Kontakt gekommen. Deshalb habe ich einen Erweiterungs- und Schließeffekt geschrieben und gleichzeitig das Umschalten des Schaltflächentexts realisiert, was sehr einfach ist! Dieses Js-Objekt betreibt CSS-Attribute, um den Erweiterungs- und Schließeffekt der Div-Ebene zu erzielen. Teilen Sie den Code mit JS-Frontend-Designern.

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn