js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法

更新時(shí)間：2015年05月11日 12:02:42 投稿：shichen2014

這篇文章主要介紹了js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法,涉及javaScript操作css樣式實(shí)現(xiàn)div彈出層的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法。分享給大家供大家參考。具體分析如下：

最近學(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)文章

原生JS實(shí)現(xiàn)動(dòng)態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)動(dòng)態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動(dòng)態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下
2018-09-09
淺談微信JS-SDK 微信分享接口開發(fā)（介紹版）
這篇文章主要介紹了淺談微信JS-SDK 微信分享接口開發(fā)（介紹版），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
js放大鏡放大購物圖片效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)放大鏡放大購物圖片效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JavaScript中利用Array和Object實(shí)現(xiàn)Map的方法
這篇文章主要介紹了JavaScript中利用Array和Object實(shí)現(xiàn)Map的方法,實(shí)例分析了javascript實(shí)現(xiàn)map的添加、獲取、移除、清空、遍歷等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例
這篇文章主要給大家介紹了關(guān)于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關(guān)資料,最近接觸到layer彈窗,感覺彈窗功能異常強(qiáng)大,真的很方便,所以記錄下來,需要的朋友可以參考下
2023-12-12
關(guān)于ECMAScript中的原始值和引用值詳解
在ECMAScript中,變量可以存在兩種類型的值,即原始值和引用,這篇這篇文章主要給大家介紹了關(guān)于ECMAScript中的原始值和引用值的相關(guān)資料,需要的朋友可以參考下
2021-08-08
JS實(shí)現(xiàn)根據(jù)密碼長度顯示安全條功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)根據(jù)密碼長度顯示安全條功能，非常不錯(cuò)，在一些網(wǎng)站上經(jīng)常會(huì)遇到此功能，需要的的朋友參考下實(shí)現(xiàn)代碼吧
2017-03-03
javascript輕量級(jí)模板引擎juicer使用指南
Juicer 是一個(gè)高效、輕量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代碼實(shí)現(xiàn)數(shù)據(jù)和視圖模型的分離(MVC)。
2014-06-06
只有 20 行的 JavaScript 模板引擎實(shí)例詳解
這篇文章主要介紹了只有 20 行的 JavaScript 模板引擎,結(jié)合實(shí)例形式分析了JavaScript 模板引擎實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JavaScript數(shù)組合并的多種方法
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)組合并的多種方法，感興趣的朋友可以參考一下
2016-05-05