js實現隱藏和顯示html

2022-07-20 02:12:09 字數 745 閱讀 4597

通常,我們的目的是在點選乙個按鈕時觸發顯示樣式的不同;

1. 首先清楚我們需要預設展示的樣式,其次需要找到點選某個按鈕後需要展示的樣式;

對於預設展示的樣式:我們需要設定style="display:block" 

刪除課程

增加課程

對於需要隱藏的樣式:需要設定style="display:none"

並對不同的型別設定不同的class標籤,比如刪除課程設定的是deletetype-item, 增加課程設定的是addtype-item

2. 其次需要在不同的條件下展示不同的樣式,以下面的實現為例,我們需要在select框發生變化的時候,來確定到底是刪課還是加課,onchange="permissionchange()"方法正是幫助我們來改變樣式的;

刪課

加課

3. 通過js**控制顯示的html, 我們獲取到select框的id, 並獲取到對應的value, 根據1中的classname 獲取到對應的節點。然後遍歷每種節點的list, 進行修改

function permissionchange() 

for (var i = 0; i < additems.length; i++)

} else

for (var i = 0; i < additems.length; i++)

}}

JS控制HTML元素的顯示和隱藏

利用來js控制頁面控制項顯示和隱藏有兩種方法,兩種方法分別利用html的style中的兩個屬性,兩種方法的不同之處在於控制項隱藏後是否還在頁面上佔空位。方法一 document.getelementbyid eleid style.visibility hidden document.getelem...

JS控制HTML元素的顯示和隱藏

利用來js控制頁面控制項顯示和隱藏有兩種方法,兩種方法分別利用html的style中的兩個屬性,兩種方法的不同之處在於控制項隱藏後是否還在頁面上佔空位。方法一 該方法實現隱藏後,頁面的位置還被控制項占用,顯示空白。方法二 該方法實現隱藏後,頁面的位置不被占用。document.getelementb...

顯示和隱藏html元件

div的visibility可以控制div的顯示和隱藏,但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid type...