class

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

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

<style>
    ul{
        display: flex;
    }
    li{
        margin: 20px;
        cursor: pointer;
    }
    li:hover{
        color: #ff5d23;
    }
    li.active{
        font-weight: bold;
        color: #ff5d23;
        font-size: 17px;
    }
</style>
<body>
    <ul>
        <li class="active">网游竞技</li>
        <li>单机热游</li>
        <li>手游休闲</li>
        <li>FPS射击</li>
        <li>卡牌棋牌</li>
    </ul>
</body>

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

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

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

<style>
    ul{
        display: flex;
    }
    li{
        margin: 20px;
        cursor: pointer;
    }
    li:hover{
        color: #ff5d23;
    }
    li.active{
        font-weight: bold;
        color: #ff5d23;
        font-size: 17px;
    }
</style>
<body>
    <ul>
        <li class="active">网游竞技</li>
        <li>单机热游</li>
        <li>手游休闲</li>
        <li>FPS射击</li>
        <li>卡牌棋牌</li>
    </ul>

    <script>
        const lis = document.querySelectorAll('li')
        console.log(lis)
    </script>
</body>

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

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

<script>
    const lis = document.querySelectorAll('li')
    console.log(lis);
    lis.forEach(li=>{
        console.dir(li);
          
    })
</script>

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

<script>
    const lis = document.querySelectorAll('li')
    console.log(lis);
    lis.forEach(li=>{
        console.dir(li);
        li.onclick = function(){
            console.log(this)
            
            this.className = 'active'
        }
    })
</script>

这边我要说的就是className

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

上方就是实现过程了

style

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

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

下面做这样的一个例子

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

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

<script>
    const btn = document.querySelector('button')
    console.log(btn)
    btn.onclick = function(){

    }
</script>

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

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

<script>
    const btn = document.querySelector('button')
    console.log(btn)
    btn.onclick = function(){
        const p = document.querySelector("p");
        const info = getComputedStyle(p);
        console.log(info)
    }
</script>

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

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

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

<script>
    const btn = document.querySelector('button')
    console.log(btn)
    btn.onclick = function(){
        const p = document.querySelector("p");
        const info = getComputedStyle(p);
        console.log(info)

        const fontSize = parseInt(info.fontSize); 
        console.log(fontSize);

        // 修改 p 标签的内联样式
        console.dir(p);
        p.style.fontSize = fontSize + 1 + "px";
    }
</script>

最终效果就是这样

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

DOM操作class与style

class

style

猜你喜欢