npm 包 jclass.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

jclass.js 是一个用于操作 HTML 元素 CSS 类的 JavaScript 工具库，它可以轻松地为元素添加、删除、切换 CSS 类。它的特点是轻量级、易于使用、强大的功能，可以很方便地实现很多常见的动态效果，比如选项卡切换、模态框显示隐藏等等。

jclass.js 是一个 npm 包，可以通过 npm 命令安装：

npm install jclass.js --save

也可以通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/jclass.js/dist/jclass.min.js"></script>

jclass.addClass(element, 'class1', 'class2', 'class3');

这个方法会把 class1、class2 和 class3 三个 CSS 类添加到 element 元素中。

jclass.removeClass(element, 'class1', 'class2', 'class3');

这个方法会把 class1、class2 和 class3 三个 CSS 类从 element 元素中删除。

jclass.toggleClass(element, 'class1', 'class2', 'class3');

这个方法会把 class1、class2 和 class3 三个 CSS 类从 element 元素中切换，如果原来有，则删除，如果原来没有，则添加。

jclass.hasClass(element, className);

这个方法会检查 element 元素是否有 className 这个 CSS 类，并返回一个布尔值。

<div id="box">Hello World</div>

.red {
  color: red;
}
.bold {
  font-weight: bold;
}

const box = document.getElementById('box');
jclass.addClass(box, 'red', 'bold');

在这个例子中，我们把 class="red bold" 添加到了 div 元素上，这样就使它变成了红色加粗的字体。

<div id="box" class="red bold">Hello World</div>

const box = document.getElementById('box');
jclass.removeClass(box, 'red');

在这个例子中，我们把 class="red bold" 的 red 类删除了，这样就使它变成了黑色加粗的字体。

<div id="box" class="red bold">Hello World</div>

const box = document.getElementById('box');
jclass.toggleClass(box, 'bold', 'italic');

在这个例子中，我们把 class="red bold" 的 bold 类删除，italic 类添加，这样就使它变成了红色斜体字体。

<div id="box" class="red bold">Hello World</div>

const box = document.getElementById('box');
jclass.hasClass(box, 'red'); // true
jclass.hasClass(box, 'italic'); // false

在这个例子中，我们检查了 div 元素是否有 red 类，发现它有；同时检查了它是否有 italic 类，发现它没有。

jclass.js 是一个非常便捷的操作 CSS 类的 JavaScript 库，它可以用于实现很多常见的动态效果。这篇文章我们介绍了它的使用方法，包括添加、删除、切换和检查类。希望你可以通过本文学到如何使用 jclass.js，并在实际开发中得到运用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005551281e8991b448d2473