js操作css屬性實現(xiàn)div層展開關(guān)閉效果的方法
更新時間：2015年05月11日 12:02:42 投稿：shichen2014
這篇文章主要介紹了js操作css屬性實現(xiàn)div層展開關(guān)閉效果的方法,涉及javaScript操作css樣式實現(xiàn)div彈出層的效果,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js操作css屬性實現(xiàn)div層展開關(guān)閉效果的方法。分享給大家供大家參考。具體分析如下：
最近學(xué)javascript接觸到j(luò)s對css屬性操作，就寫了個展開關(guān)閉效果，同時實現(xiàn)了按鈕文字切換，很簡潔?。∵@段Js對象操作css屬性實現(xiàn)div層的展開關(guān)閉效果。將代碼分享給JS前端設(shè)計者。
<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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了淺談微信JS-SDK 微信分享接口開發(fā)（介紹版），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)放大鏡放大購物圖片效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript中利用Array和Object實現(xiàn)Map的方法
這篇文章主要介紹了JavaScript中利用Array和Object實現(xiàn)Map的方法,實例分析了javascript實現(xiàn)map的添加、獲取、移除、清空、遍歷等操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下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
在ECMAScript中,變量可以存在兩種類型的值,即原始值和引用,這篇這篇文章主要給大家介紹了關(guān)于ECMAScript中的原始值和引用值的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了基于JS實現(xiàn)根據(jù)密碼長度顯示安全條功能，非常不錯，在一些網(wǎng)站上經(jīng)常會遇到此功能，需要的的朋友參考下實現(xiàn)代碼吧2017-03-03
Juicer 是一個高效、輕量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代碼實現(xiàn)數(shù)據(jù)和視圖模型的分離(MVC)。2014-06-06
這篇文章主要介紹了只有 20 行的 JavaScript 模板引擎,結(jié)合實例形式分析了JavaScript 模板引擎實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)組合并的多種方法，感興趣的朋友可以參考一下2016-05-05