DOM操作class与style

class

我们先来看这样的一个例子

点击谁, 谁高亮, 这边我们先来书写简单的html和css代码, 完成基本的样式

    

        
网游竞技
        
单机热游
        
手游休闲
        
FPS射击
        
卡牌棋牌
    

 上方代码就是简单的基本样式了, 先来提出需求: 点击li, 添加class='active'

这边我首先的思路是这样的, 我们先找到所有的li标签, 在JS中怎么样才能找到document 中的标签呢?

document提供了querySelectorAll, 可以利用 css选择器找到你想要的元素, 我们这边先来试一下

    

        
网游竞技
        
单机热游
        
手游休闲
        
FPS射击
        
卡牌棋牌
    

    

下方代码在脚本里面书写, 我们首先来看一下打印的结果

可以看到, 鼠标放在哪个li标签上, 哪个就会有响应的结果, 这样就算是找到了所有的li标签, 我们也可以看到下面的Prototype的查询结果是一个 伪数组 类型, 原型是 NodeList.prototype, 其中也存在 forEach 方法可以使用 -- 从数组借来的, 所有我们再来用forEach的方式遍历一下数组(这边我不写html代码了, 直接写JS代码)

遍历完数组, 可以用dir的方式打印一个自行查看一下, 最后是点击谁, 谁高亮, 那点击事件用的是 onclick 方法来实现, 最终把 active 添加到谁点击谁使用,  把被点击的DOM元素的 class='active'

这边我要说的就是className

className: 就是class属性, 由于class在JS中是关键词, 所以被迫改名

上方就是实现过程了

style

style: 内联样式, 直接在元素上书写的 style 属性 ;

优先级最高, 如果同时书写 class 和 style, 同样的样式, style优先生效

下面做这样的一个例子

点击变大的按钮, 让下方的字体大小变大

首先, 我们用 document 先来找到这个按钮, 然后通过 onclick 点击事件来实现此操作(html代码不必阐述, 很简单的两行, 这边我只写JS代码)

 我们的期望就是: 在p标签原来的字体大小 + 1, 那这边下一个知识点就是怎么样获取某个元素的当前样式信息呢?

那么就有这样一个属性, 就是getComputedStyle 可以获取到当前的样式信息, 首先找到 当前字段的标签元素, 然后再来调用这个getComputedStyle属性

我们来输出一下info, 看看里面都有什么属性

密密麻麻, 这些其实都是 css 的样式属性, 都在这里面, 我们再来查找到字体大小的属性

 

可以看到, 当前的字体大小的值是17px, 存储在 fontSize 属性里面,  当前这里用的都是小驼峰的方式, 后面跟的是一个字符串, 我们要用 parseInt 来把它转换一下('17px' -> 17), 最后再来用 + 号拼接的方式来完成就可以了

最终效果就是这样

 用DOM中的style方法, 点击变大按钮让下方的字体变大就可以了