Javascript获取className属性和slice切片

大家好，欢迎来到IT知识分享网。

项目目标

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

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

预留样式

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简介和基础数据类型
• Javascript在线刷题输入输出模板，学编程为什么要刷题？
• Javascript点击按钮控制图片切换
• Linux神之编辑器VIM，史上最强编辑器！

• 一文详解Python模块和包
• Python语言print语句和变量使用
• 一文详解Python文件操作
• 一文详解Python异常处理
• 一文详解Python面向对象编程
• 人生苦短，我用Python，初学者最友好的编程语言