目目標(biāo)

打開項(xiàng)目，觀察導(dǎo)航條都是統(tǒng)一樣式：

點(diǎn)擊某一個導(dǎo)航條后，樣式發(fā)生變化：

預(yù)留樣式

1.給類名為nav_li的元素添加字體大小為20px，顏色為黑色，字體加粗，字體為自己喜歡的字體。

2.給類名為add的元素設(shè)置背景色紅色，邊框圓角13px,字體白色，轉(zhuǎn)為行內(nèi)塊，寬為92px。

.nav_li {
	font-family: "微軟雅黑";
	font-weight: bold;
	font-size: 20px;
	color: black;
}

.add {
	background-color: red;
	border-radius: 13px;
	color: white;
	display: inline-block;
	width: 92px;
}

nav_li是統(tǒng)一樣式，add是點(diǎn)擊導(dǎo)航條之后增加的樣式。

在html中添加add類：

<h1>My machine armor</h1>
<div>
	  <span class="nav_li">機(jī)甲庫</span>
	  <span class="nav_li">炫酷皮膚</span>
	  <span class="nav_li">裝備零件</span>
	  <span class="nav_li">戰(zhàn)力測評</span>
</div>

script邏輯處理

首先，獲取nav_li類對象，返回值是數(shù)組類型：

let nav=document.getElementsByClassName("nav_li");
console.log(nav);

導(dǎo)航條原始類名為nav_li，被點(diǎn)擊后，在后面添加add類名，中間有一個空格。同時注意，要將之前的類名都重新置為nav_li。

for(let i=0; i < nav.length; i++){
			console.log(nav[i]);
			nav[i].onclick=function(){

			for(let i=0; i < nav.length; i++)
			nav[i].className="nav_li";

			this.className +=" add";
	}
}

slice字符串切片

• slice(x, len)：表示從字符串下標(biāo)為x處開始切片，切片長度為len
• sclice(x)：表示從字符串下標(biāo)為x處開始切片，直至字符串結(jié)束

給類名"nav_li add"切片，將類名分離出來：

alert(this.className.slice(0, 6));
alert(this.className.slice(7));

相關(guān)推薦

• Javascript簡介和基礎(chǔ)數(shù)據(jù)類型

取元素偏移量

獲取標(biāo)簽

示例

獲取標(biāo)簽元素

示例

獲取表單元素屬性

示例

設(shè)置自定義屬性

示例

添加和刪除元素

改變 HTML 元素

獲取元素偏移量

object.offsetLeft：元素距離leftBody多少；

object.offsetTop：元素距離topBody多少；

獲取標(biāo)簽

object.getElementById：通過ID獲取元素；

object.getElementsByTagName：通過標(biāo)簽獲取元素；

object.getElementsByName：通過name獲取元素；

object.getElementsByClassName：通過class獲取元素；

object.querySelector：通過選擇器獲取元素,只返回第一個；

object.querySelectorAll：通過選擇器獲取元素,返回所有；

示例

document.getElementById('cce') // 通過id來獲取元素;

document.getElementsByClassName('cce') // 通過class來獲取元素;

document.getElementsByTagName('div') // 通過標(biāo)簽來獲取元素;

document.querySelector('.cce') // 通過選擇器來獲取元素,只返回第一個;

document.querySelectorAll('#cce') // 通過選擇器來獲取元素,返回所有;

獲取標(biāo)簽元素

innerHTML:找到標(biāo)簽下面的標(biāo)簽包括文本；

innerText/textContent:找到標(biāo)簽下面的文本,他們兩個的用法是一樣的，只不過有的瀏覽器不支持，現(xiàn)在一般用innerTEXT；

示例

document.getElementById('cce').innerTEXT='cce';

獲取表單元素屬性

value：用于大部分表單元素的內(nèi)容獲取(option除外)；

type：可以獲取input標(biāo)簽的內(nèi)心(輸入框或復(fù)選框等)；

disabled：禁用屬性；

checked：復(fù)選框選中屬性；

selected：下拉菜單選中屬性；

示例

object.getElementById('id').disabled=true/false

object.getElementById('id').checked=true/false

object.getElementById('id').selected=true/false

設(shè)置自定義屬性

getAttribute：獲取自定義屬性；

setAttribute：設(shè)定自定義屬性；

removeAttribute：移除自定義屬性；

示例

object.getAttribute('cce')

object.setAttribute('cce',18)

object.removeAttribute('cce')

添加和刪除元素

document.createElement(element)：創(chuàng)建HTML元素；

document.removeChild(element)：刪除HTML元素；

document.appendChild(element)：添加HTML元素；

document.replaceChild(element)：替換HTML元素；

document.write(text)：寫入HTML輸出流；

改變 HTML 元素

element.innerHTML=new html content：改變元素的inner HTML；

element.attribute=new value：改變HTML元素的屬性值；

element.setAttribute(attribute, value)：改變HTML元素的屬性值；

element.style.property=new style：改變HTML元素的樣式；

下是一個使用VBA獲取HTMLDocument對象并獲取網(wǎng)頁元素的示例代碼：

```vba

Sub GetHTMLDocument()

' 聲明對象變量

Dim IE As Object

Dim HTMLDoc As Object

' 創(chuàng)建 Internet Explorer 對象

Set IE=CreateObject("InternetExplorer.Application")

' 設(shè)置是否可見

IE.Visible=False

' 打開網(wǎng)頁

IE.Navigate "http://www.example.com"

' 等待頁面加載完成

Do While IE.Busy Or IE.ReadyState <> 4

DoEvents

Loop

' 獲取 HTMLDocument 對象

Set HTMLDoc=IE.Document

' 獲取網(wǎng)頁元素示例

Dim inputElements As Object

Dim tdElements As Object

Dim classNameElements As Object

' 獲取 <input> 元素集合

Set inputElements=HTMLDoc.getElementsByTagName("input")

' 遍歷 <input> 元素集合

For Each element In inputElements

' 在這里進(jìn)行你的操作

Debug.Print element.ID ' 輸出元素ID屬性

Next element

' 獲取 <td> 元素集合

Set tdElements=HTMLDoc.getElementsByTagName("td")

' 遍歷 <td> 元素集合

For Each element In tdElements

' 在這里進(jìn)行你的操作

Debug.Print element.innerText ' 輸出元素文本內(nèi)容

Next element

' 獲取具有指定類名的元素集合

Set classNameElements=HTMLDoc.getElementsByClassName("classname")

' 遍歷具有指定類名的元素集合

For Each element In classNameElements

' 在這里進(jìn)行你的操作

Debug.Print element.innerText ' 輸出元素文本內(nèi)容

Next element

' 關(guān)閉 Internet Explorer

IE.Quit

' 釋放對象變量

Set IE=Nothing

Set HTMLDoc=Nothing

Set inputElements=Nothing

Set tdElements=Nothing

Set classNameElements=Nothing

End Sub

```

上述代碼使用Internet Explorer創(chuàng)建一個無界面的瀏覽器對象（IE對象），并加載指定的網(wǎng)頁。然后，利用IE對象的Document屬性可以獲取到網(wǎng)頁的HTMLDocument對象，通過HTMLDocument對象可以獲取指定元素。示例中展示了如何獲取 `<input>` 元素、`<td>` 元素和具有指定類名的元素集合，并對獲取到的元素進(jìn)行簡單操作。你可以根據(jù)網(wǎng)頁的實(shí)際結(jié)構(gòu)和需要進(jìn)一步擴(kuò)展和修改代碼。