网站首页 > 技术文章正文

Javascript获取className属性和slice切片

nanyue 2024-10-04 18:19:36 技术文章 18 ℃

项目目标

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

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

预留样式

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获取className属性和slice切片

项目目标

预留样式

script逻辑处理

slice字符串切片

相关推荐

猜你喜欢

网站首页 > 技术文章 正文

Javascript获取className属性和slice切片

项目目标

预留样式

script逻辑处理

slice字符串切片

相关推荐

猜你喜欢

网站首页 > 技术文章正文