用原生JS寫點選元素變色的多種方法

2022-03-08 07:23:39 字數 610 閱讀 4211

一組陣列元素,點選其中某乙個陣列元素,被點選的那個元素就會變色或者放大,也就是樣式有修改,這是我們經常用到的功能,我們經常實現這個功能用到的一般都是兩個迴圈,第乙個迴圈給每個元素繫結事件,第二個迴圈為所有元素樣式變成預設。

var headcel =document.getelementbyid('headerbar').children;

for(var i=0;i)

this.style.color = "#e5502e";

}}

其實用原生js實現這個功能還有一種更簡單的方法:

//

點選頭部小導航條繫結事件

var headli =headul.children;

var oldindex =0;

for (var k = 0; k < headli.length; k++)

}

定義乙個oldindex,為剛剛點選元素的index,初始值為預設選擇的index,一般為0,在每次不同元素點選後,將該被點選元素的index賦值給定義的oldindex,在發生下一次點選事件的時候,就讓上一次被點的元素elarr[oldindex]的樣式恢復到原樣,這次被點選的元素更改樣式。

原生JS獲取DOM元素的方法(很多種方法)

通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇器獲取一組元素 querysel...

用原生的JS寫AJAX

第乙個值是請求方式,第二個值是url位址,第三個值是否非同步 xhr.onreadystatechange function xhr.send 網頁要用伺服器執行否則會有同源禁止策略。json.parse 將json格式資料轉化為js格式資料 這是json檔案 這是用ajax拿到的資料 如果是向頁面...

js獲取當前點選元素的索引

以ul下的li元素為例 獲取li的索引,如下 方法1 把每個li元素加上index屬性,每個li被點選時獲取index屬性即可 var ul document.getelementbyid list var list ul.queryselectorall li for var i 0 i list...