關於DOM操作的相關案例

2022-08-01 10:24:10 字數 680 閱讀 8205

需求：

開啟網頁時有乙個普通的按鈕，點選當前按鈕顯示乙個背景圖，中心並彈出乙個彈出框，點選x的時候會關閉當前的模態框

**如下：

彈出
需求：

圖如下：

**如下：




按鈕1按鈕2


按鈕3按鈕4


按鈕5
**解釋：

滑鼠懸停時，current欄變色，這裡用到了排他思想：先把所有按鈕的classname設定為空，然後把我(this)這個按鈕的classname設定為current，就可以達到變色的效果。核心**是：

//排他思想：先把所有按鈕的classname設定為空，然後把我（this）這個按鈕的classname設定為current


//排他思想和for迴圈連用


for(var j=0;j**如下：


首頁內容


新聞內容


內容
**如下：

我的購物車

12 DOM操作的相關案例

需求 開啟網頁時有乙個普通的按鈕，點選當前按鈕顯示乙個背景圖，中心並彈出乙個彈出框，點選x的時候會關閉當前的模態框 如下 彈出 需求 圖如下 如下 按鈕1按鈕2 按鈕3按鈕4 按鈕5 解釋 滑鼠懸停時，current欄變色，這裡用到了排他思想 先把所有按鈕的classname設定為空，然後把我 th...

關於DOM的事件操作

三部分 js是以事件驅動為核心的一門語言 事件源,事件,事件驅動程式 比如，我用手去按開關，燈亮了。這件事情裡，事件源是 手。事件是 按開關。事件驅動程式是 燈的開和關。再比如，網頁上彈出乙個廣告，我點選右上角的x，廣告就關閉了。這件事情裡，事件源是 x。事件是 onclick。事件驅動程式是 廣告...

DOM外聯樣式相關操作

dom在對css樣式進行修改的時候，直接使用style會出現無法獲取外聯樣式表樣式的情況，這時需要使用css 樣式宣告物件 cssstyledeclaration 其中有乙個csstext屬性，用於設定或返回樣式宣告文字，csstext 對應的是 html 元素的 style 屬性。語法如下 返回 ...