js操作css屬性實現(xiàn)div層展開關閉效果的方法
更新時間：2015年05月11日 12:02:42 投稿：shichen2014
這篇文章主要介紹了js操作css屬性實現(xiàn)div層展開關閉效果的方法,涉及javaScript操作css樣式實現(xiàn)div彈出層的效果,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js操作css屬性實現(xiàn)div層展開關閉效果的方法。分享給大家供大家參考。具體分析如下：
最近學javascript接觸到js對css屬性操作，就寫了個展開關閉效果，同時實現(xiàn)了按鈕文字切換，很簡潔啊！這段Js對象操作css屬性實現(xiàn)div層的展開關閉效果。將代碼分享給JS前端設計者。
<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">腳本之家提供編程源碼、網(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='關閉';
}else{
aiin.style.display = 'none';
inp.value='展開';
}
}
</script>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
three.js是一個可以使用javascript繪制3d圖形的庫，它對WebGL的api進行封裝，使開發(fā)更加方便，就像jQuery對DOM的api進行封裝一樣。這篇文章主要介紹了微信小游戲之使用three.js 繪制一個旋轉的三角形,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了判斷js驗證日期時間有效性的方法，需要的朋友可以參考下2015-10-10
下面小編就為大家?guī)硪黄趈s對象,操作屬性、方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
js 優(yōu)化次數(shù)過多的循環(huán) 考慮到性能問題
IE沒有我們想象中笨，它知道總的循環(huán)次數(shù)還是一千萬次。因此，得把這一百個十萬次循環(huán)分開執(zhí)行。雖然Javascript是單線程的，但也可以通過setTimeout或setInterval模擬多線程。2011-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)滾動條自動滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要是帶大家一起了解一下所有有關JavaScript箭頭函數(shù)的信息。文中通過示例講解了如何使用ES6的箭頭語法，以及在代碼中使用箭頭函數(shù)時需要注意的一些常見錯誤，需要的可以參考一下2022-11-11
JavaScript中定義function有以下三種方式.2009-10-10
這篇文章主要介紹了微信小程序獲取用戶openid的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文主要分享了js實現(xiàn)清除輸入框內的空格的代碼，代碼簡單易懂，需要的朋友一起來看下吧2016-12-12
js實現(xiàn)iGoogleDivDrag模塊拖動層拖動特效的方法
這篇文章主要介紹了js實現(xiàn)iGoogleDivDrag模塊拖動層拖動特效的方法,實例分析了javascript操作拖動層的技巧,需要的朋友可以參考下2015-03-03