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

<title>js操作div展開關(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='展開' id='inp'>
<div id="jb51">腳本之家提供編程源碼、網(wǎng)站源碼、網(wǎng)頁素材、
書籍教程、網(wǎng)站模板、網(wǎng)頁特效代碼等！</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='展開';
  }
}
</script>

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

您可能感興趣的文章:

相關(guān)文章

微信小游戲之使用three.js 繪制一個(gè)旋轉(zhuǎn)的三角形
three.js是一個(gè)可以使用javascript繪制3d圖形的庫，它對(duì)WebGL的api進(jìn)行封裝，使開發(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ī)硪黄趈s對(duì)象,操作屬性、方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
js 優(yōu)化次數(shù)過多的循環(huán) 考慮到性能問題
IE沒有我們想象中笨，它知道總的循環(huán)次數(shù)還是一千萬次。因此，得把這一百個(gè)十萬次循環(huán)分開執(zhí)行。雖然Javascript是單線程的，但也可以通過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ù)的信息。文中通過示例講解了如何使用ES6的箭頭語法，以及在代碼中使用箭頭函數(shù)時(shí)需要注意的一些常見錯(cuò)誤，需要的可以參考一下
2022-11-11
JavaScript 定義function的三種方式小結(jié)
JavaScript中定義function有以下三種方式.
2009-10-10
微信小程序獲取用戶openid的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序獲取用戶openid的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
清除輸入框內(nèi)的空格
本文主要分享了js實(shí)現(xiàn)清除輸入框內(nè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