12 DOM操作的相關案例

2022-09-06 13:00:27 字數 771 閱讀 7903

需求：

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

**如下：

彈出
需求：

圖如下：

**如下：




按鈕1按鈕2


按鈕3按鈕4


按鈕5
**解釋：

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

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


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


for(var j=0;j


**如下：


首頁內容


新聞內容


內容
用let定義變數避免了變數提公升的問題，具體**如下：

首頁內容


新聞內容


內容
**如下：

我的購物車

關於DOM操作的相關案例

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

DOM外聯樣式相關操作

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

DOM常用操作 元素 節點相關

dom物件的深入理解這篇文章中有提到一些dom操作，我們會在這篇文章中簡單回顧一下。幾個需求 dom元素的增刪改 注意 如果獲取到一組物件，要獲得元素物件需要加相應索引 只有事先寫好了行內樣式才可以獲取和修改，其他設定樣式的方法不可。而且設定之後也只是設定行內樣式 需要提前寫好某個樣式類的css c...