在前端开发中，我们通常需要根据不同的状态或条件为元素添加或移除类来实现样式的变化。这种需求可以通过 Knockout.js 的 CSS 绑定轻松地实现。
CSS 绑定介绍
Knockout.js 是一个 MVVM（Model-View-ViewModel）框架，其主要功能是将数据模型绑定到视图层，并自动保持两者的同步。CSS 绑定是 Knockout.js 提供的一种特殊的绑定类型，它可以让我们根据数据模型中的属性值来动态地添加、移除或切换元素的类名。
CSS 绑定的基本用法非常简单。首先，需要在元素上使用 data-bind 属性，指定 CSS 绑定的类型和绑定表达式。例如，要将 myClass 类名绑定到 isTrue 属性上，可以这样写：
<div data-bind="css: { 'myClass': isTrue }">Some content</div>上述代码中，{ 'myClass': isTrue } 是一个 JavaScript 对象字面量，表示当 isTrue 的值为真时，将为 div 元素添加 myClass 类名。
动态类与静态类的结合
但有时候我们需要在元素上同时添加动态和静态的类名，例如：
<div class="staticClass" data-bind="css: { 'dynamicClass': isTrue }">Some content</div>上述代码中，div 元素除了绑定的动态类名 dynamicClass 外，还有一个静态类名 staticClass。这时我们需要将两者结合起来，才能使它们同时生效。
解决办法是在 CSS 绑定表达式中使用数组语法，例如：
<div class="staticClass" data-bind="css: [{ 'dynamicClass': isTrue }, 'staticClass']">Some content</div>上述代码中，CSS 绑定表达式由一个数组组成，其中第一个元素是对象字面量 { 'dynamicClass': isTrue }，表示动态类名；第二个元素是字符串 'staticClass'，表示静态类名。这样做就可以同时添加动态和静态的类名了。
示例代码
下面是一个完整的示例，演示如何通过 CSS 绑定结合动态和静态类实现一个按钮的状态切换效果。
HTML 代码：
<button class="btn" data-bind="css: [{ 'btn-primary': isEnabled }, 'btn-secondary']"
data-bind="enable: !isLoading(), click: handleClick">
<span data-bind="visible: !isLoading()">Click me</span>
<span data-bind="visible: isLoading()">Loading...</span>
</button>JavaScript 代码：
-- -------------------- ---- -------
--- --------- - ---------- -
--- ---- - -----
-------------- - --------------------
-------------- - ---------------------
---------------- - ---------- -
----------------------
---------------------
--------------------- -
---------------------
----------------------
-- ------
--
--
-------------------- -------------上述代码中，按钮的初始状态是可用、非加载中，样式为 btn btn-secondary。当按钮被点击后，它的状态变为不可用、加载中，样式变为 btn btn-primary；2 秒后恢复为可用、非加载中，样式变回 btn btn-secondary。
总结
通过 CSS 绑定结合动态和静态类，我们可以轻松地实现元素的样式切换效果，使前端开发更加方便快捷。在实际项目中，我们应当灵活运用 CSS 绑定，根据具体需求来组织元素的类名，让页面
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26929