在使用 Material Design 组件进行前端开发时，经常需要对组件的状态进行颜色变化。比如，当一个按钮被禁用时，需要改变按钮的背景色来表示它的禁用状态。
本文将介绍利用 CSS 和 JavaScript 实现 Material Design 组件状态颜色变化的方法，帮助开发者更好地使用 Material Design 组件，提高用户体验。
CSS 实现状态颜色变化
CSS 是实现状态颜色变化最简单的方法，而且具有很好的跨浏览器兼容性。
通过添加 class 名称实现状态颜色变化
对于大多数 Material Design 组件来说，我们可以通过在组件上添加特定的 class 名称来实现状态颜色变化。例如， Material Design Lite（MDL）组件库中的按钮组件可以通过添加 “-disabled” class 名称来改变按钮的颜色。具体代码如下：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" disabled>Disabled Button</button>
由于按钮上添加了 “disabled” 属性，所以按钮进入禁用状态并采用 “-disabled” 类的样式。
利用 CSS 伪类实现状态颜色变化
CSS 还提供了多个伪类可以用来实现状态颜色变化。例如，“:hover” 伪类使用在鼠标悬停在元素上的情况下。
button:hover {
background-color: #3f51b5;
}当鼠标悬停在按钮上时，按钮的背景色变成 #3f51b5。
对于某些状态，例如焦点状态和选择状态，伪类“:focus” 和 “:active” 可以被使用。
button:focus {
background-color: #3f51b5;
}
button:active {
background-color: #303f9f;
}当按钮获得焦点或被点击时，按钮的背景色分别变成 #3f51b5 和 #303f9f。
利用 CSS 变量实现状态颜色变化
CSS 变量是一个比较新的特性，通过它，我们可以轻松实现状态颜色变化。我们可以通过定义 CSS 变量，然后将其用作组件的颜色属性。例如，下面是一个使用 CSS 变量实现的 Material Design 标签组件：
-- -------------------- ---- -------
-------
----- -
------------ --------
------------------ --------
-
-------- -
----------------- -----------------
------ ------
-
-------------- -
----------------- -----------------------
-
--------
----- --------------------------上述代码中，“:root” 伪元素用于定义 CSS 变量，计算属性 “var” 可以用来引用这些变量。通过定义不同的变量，可以轻松地实现不同状态的颜色变化。
JavaScript 实现状态颜色变化
JavaScript 可以通过在特定事件上更新元素的样式类来实现状态颜色变化。
<button id="myButton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">My Button</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
button.classList.add('my-button--clicked');
});
</script>上述代码中，当按钮被点击时，会在按钮上添加 “my-button--clicked” class，这个 class 可以用 CSS 样式来改变按钮的颜色。
JavaScript 同样可以通过删除 class 的方式，恢复组件原有的状态。
<button id="myButton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect my-button--clicked">My Button</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
button.classList.remove('my-button--clicked');
});
</script>上述代码中，按钮原本就有“my-button--clicked” class，当再次点击按钮时，它会被删除，按钮的颜色也会恢复到原来的状态。
结论
在本文中，我们介绍了利用 CSS 和 JavaScript 实现 Material Design 组件状态颜色变化的方法。无论你是在使用特定库的组件，还是自己开发自定义组件，这些技术都是非常有用的。
通过掌握这些技术，你可以轻松地实现 Material Design 组件的状态颜色变化，从而提高用户体验和用户友好性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f16b846fbf9601973aee31