最近學(xué)javascript接觸到j(luò)s對(duì)css屬性操作，就寫(xiě)了個(gè)展開(kāi)關(guān)閉效果，同時(shí)實(shí)現(xiàn)了按鈕文字切換，很簡(jiǎn)潔啊！這段Js對(duì)象操作css屬性實(shí)現(xiàn)div層的展開(kāi)關(guān)閉效果。將代碼分享給JS前端設(shè)計(jì)者。

<title>js操作div展開(kāi)關(guān)閉</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='展開(kāi)' id='inp'>
<div id="jb51">腳本之家提供編程源碼、網(wǎng)站源碼、網(wǎng)頁(yè)素材、
書(shū)籍教程、網(wǎng)站模板、網(wǎng)頁(yè)特效代碼等！</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='關(guān)閉';
  }else{
    aiin.style.display = 'none';  
    inp.value='展開(kāi)';
  }
}
</script>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形
three.js是一個(gè)可以使用javascript繪制3d圖形的庫(kù)，它對(duì)WebGL的api進(jìn)行封裝，使開(kāi)發(fā)更加方便，就像jQuery對(duì)DOM的api進(jìn)行封裝一樣。這篇文章主要介紹了微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形,需要的朋友可以參考下
2019-06-06
js判斷日期時(shí)間有效性的方法
這篇文章主要介紹了判斷js驗(yàn)證日期時(shí)間有效性的方法，需要的朋友可以參考下
2015-10-10
基于js對(duì)象,操作屬性、方法詳解
下面小編就為大家?guī)?lái)一篇基于js對(duì)象,操作屬性、方法詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
js 優(yōu)化次數(shù)過(guò)多的循環(huán) 考慮到性能問(wèn)題
IE沒(méi)有我們想象中笨，它知道總的循環(huán)次數(shù)還是一千萬(wàn)次。因此，得把這一百個(gè)十萬(wàn)次循環(huán)分開(kāi)執(zhí)行。雖然Javascript是單線程的，但也可以通過(guò)setTimeout或setInterval模擬多線程。
2011-03-03
js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
詳解JavaScript中的箭頭函數(shù)的使用
這篇文章主要是帶大家一起了解一下所有有關(guān)JavaScript箭頭函數(shù)的信息。文中通過(guò)示例講解了如何使用ES6的箭頭語(yǔ)法，以及在代碼中使用箭頭函數(shù)時(shí)需要注意的一些常見(jiàn)錯(cuò)誤，需要的可以參考一下
2022-11-11
JavaScript 定義function的三種方式小結(jié)
JavaScript中定義function有以下三種方式.
2009-10-10
微信小程序獲取用戶(hù)openid的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序獲取用戶(hù)openid的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
清除輸入框內(nèi)的空格
本文主要分享了js實(shí)現(xiàn)清除輸入框內(nèi)的空格的代碼，代碼簡(jiǎn)單易懂，需要的朋友一起來(lái)看下吧
2016-12-12
js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)iGoogleDivDrag模塊拖動(dòng)層拖動(dòng)特效的方法,實(shí)例分析了javascript操作拖動(dòng)層的技巧,需要的朋友可以參考下
2015-03-03