更改图标颜色反应原生元素 - Javascript (1)

📌 相关文章

📜 更改图标颜色反应原生元素 - Javascript (1)

📅 最后修改于: 2023-12-03 15:40:11.891000 🧑 作者: Mango

更改图标颜色反应原生元素 - JavaScript

在许多 Web 开发场景中，更改图标颜色以反应原生元素是非常有用的，例如将导航栏中的图标与所选选项进行匹配。此外，使用 JavaScript 更改图标的颜色也可以允许动态地更新页面上的图标，响应用户交互。

准备工作

在开始编写更改图标颜色的 JavaScript 代码之前，我们需要导入使用图标的 HTML 和 CSS 文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>更改图标颜色反应原生元素</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <div class="nav">
        <a href="#" class="nav-item active">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>个人中心</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-shopping-cart"></i>
            <span>购物车</span>
        </a>
    </div>
</body>
</html>

/* style.css */

.nav {
    display: flex;
    align-items: center;
    height: 50px;
    background-color: #f0f0f0;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: #666;
    transition: color .2s;
}

.nav-item.active {
    color: #000;
}

.nav-item i {
    margin-right: 5px;
}

在上面的 HTML 代码段中，我们创建了一个导航栏，其中包含三个选项，其中包含 Font Awesome 5 中的一些图标。

请注意，在样式表中，我们还定义了类 .nav-item.active，该类将更改文本颜色以反应活动导航选项。此外，.nav-item 类还包含子元素 <i>，其中包含我们要更改颜色的 Font Awesome 图标。

更改图标颜色

下面是 JavaScript 代码，用于更改 Font Awesome 图标的颜色。

// script.js

const navItems = document.querySelectorAll('.nav-item');

navItems.forEach(navItem => {
    navItem.addEventListener('click', () => {
        navItems.forEach(item => item.classList.remove('active'));
        navItem.classList.add('active');
        const icon = navItem.querySelector('i');
        const { color: oldColor } = getComputedStyle(icon);
        const newColor = navItem.classList.contains('active') ? '#000' : oldColor;
        icon.style.color = newColor;
    });
});

在上面的代码段中，我们首先选择所有具有 .nav-item 类的元素，然后依次迭代每个元素以添加事件监听器。

当用户单击元素时，我们

首先将所有元素的 active 类都移除
为目标元素添加 active 类
获取该元素的 Font Awesome 图标
获取当前图标颜色
如果元素处于活动状态，则将颜色更改为 #000，否则保留旧颜色

上述代码段采用了解构操作符获取了 icon 元素的样式，这是一种比较简洁的写法。

总结

在本文中，我们了解了更改图标颜色以反应原生元素的功能，这在许多 Web 开发场景中非常有用。使用 JavaScript 创建此功能相对简单，只需添加一些事件监听器和颜色更改逻辑即可。