目目标

打开项目，观察导航条都是统一样式：

点击某一个导航条后，样式发生变化：

预留样式

1.给类名为nav_li的元素添加字体大小为20px，颜色为黑色，字体加粗，字体为自己喜欢的字体。

2.给类名为add的元素设置背景色红色，边框圆角13px,字体白色，转为行内块，宽为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是统一样式，add是点击导航条之后增加的样式。

在html中添加add类：

<h1>My machine armor</h1>
<div>
	  <span class="nav_li">机甲库</span>
	  <span class="nav_li">炫酷皮肤</span>
	  <span class="nav_li">装备零件</span>
	  <span class="nav_li">战力测评</span>
</div>

script逻辑处理

首先，获取nav_li类对象，返回值是数组类型：

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

导航条原始类名为nav_li，被点击后，在后面添加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)：表示从字符串下标为x处开始切片，切片长度为len
• sclice(x)：表示从字符串下标为x处开始切片，直至字符串结束

给类名"nav_li add"切片，将类名分离出来：

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

相关推荐

• Javascript简介和基础数据类型

取元素偏移量

获取标签

示例

获取标签元素

示例

获取表单元素属性

示例

设置自定义属性

示例

添加和删除元素

改变 HTML 元素

获取元素偏移量

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

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

获取标签

object.getElementById：通过ID获取元素；

object.getElementsByTagName：通过标签获取元素；

object.getElementsByName：通过name获取元素；

object.getElementsByClassName：通过class获取元素；

object.querySelector：通过选择器获取元素,只返回第一个；

object.querySelectorAll：通过选择器获取元素,返回所有；

示例

document.getElementById('cce') // 通过id来获取元素;

document.getElementsByClassName('cce') // 通过class来获取元素;

document.getElementsByTagName('div') // 通过标签来获取元素;

document.querySelector('.cce') // 通过选择器来获取元素,只返回第一个;

document.querySelectorAll('#cce') // 通过选择器来获取元素,返回所有;

获取标签元素

innerHTML:找到标签下面的标签包括文本；

innerText/textContent:找到标签下面的文本,他们两个的用法是一样的，只不过有的浏览器不支持，现在一般用innerTEXT；

示例

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

获取表单元素属性

value：用于大部分表单元素的内容获取(option除外)；

type：可以获取input标签的内心(输入框或复选框等)；

disabled：禁用属性；

checked：复选框选中属性；

selected：下拉菜单选中属性；

示例

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

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

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

设置自定义属性

getAttribute：获取自定义属性；

setAttribute：设定自定义属性；

removeAttribute：移除自定义属性；

示例

object.getAttribute('cce')

object.setAttribute('cce',18)

object.removeAttribute('cce')

添加和删除元素

document.createElement(element)：创建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对象并获取网页元素的示例代码：

```vba

Sub GetHTMLDocument()

' 声明对象变量

Dim IE As Object

Dim HTMLDoc As Object

' 创建 Internet Explorer 对象

Set IE=CreateObject("InternetExplorer.Application")

' 设置是否可见

IE.Visible=False

' 打开网页

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

' 等待页面加载完成

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

DoEvents

Loop

' 获取 HTMLDocument 对象

Set HTMLDoc=IE.Document

' 获取网页元素示例

Dim inputElements As Object

Dim tdElements As Object

Dim classNameElements As Object

' 获取 <input> 元素集合

Set inputElements=HTMLDoc.getElementsByTagName("input")

' 遍历 <input> 元素集合

For Each element In inputElements

' 在这里进行你的操作

Debug.Print element.ID ' 输出元素ID属性

Next element

' 获取 <td> 元素集合

Set tdElements=HTMLDoc.getElementsByTagName("td")

' 遍历 <td> 元素集合

For Each element In tdElements

' 在这里进行你的操作

Debug.Print element.innerText ' 输出元素文本内容

Next element

' 获取具有指定类名的元素集合

Set classNameElements=HTMLDoc.getElementsByClassName("classname")

' 遍历具有指定类名的元素集合

For Each element In classNameElements

' 在这里进行你的操作

Debug.Print element.innerText ' 输出元素文本内容

Next element

' 关闭 Internet Explorer

IE.Quit

' 释放对象变量

Set IE=Nothing

Set HTMLDoc=Nothing

Set inputElements=Nothing

Set tdElements=Nothing

Set classNameElements=Nothing

End Sub

```

上述代码使用Internet Explorer创建一个无界面的浏览器对象（IE对象），并加载指定的网页。然后，利用IE对象的Document属性可以获取到网页的HTMLDocument对象，通过HTMLDocument对象可以获取指定元素。示例中展示了如何获取 `<input>` 元素、`<td>` 元素和具有指定类名的元素集合，并对获取到的元素进行简单操作。你可以根据网页的实际结构和需要进一步扩展和修改代码。