简介
o- 是一个轻量级的 JavaScript 库，它可以帮助你更加优雅地处理 DOM 元素的样式。o- 支持链式调用和基于类名选择器的样式修改方式，可以让前端开发者更加高效地编写代码。
安装
在终端中使用 npm 进行安装：
npm install o-
使用
基本用法
import { o } from 'o-'
o('.example-class').set('background-color', 'red')上面的代码中，我们使用 o() 选择了一个 class 为 example-class 的 DOM 元素，并修改了它的背景色为红色。
o- 提供了一系列 API 来操作 DOM 元素的样式。下面是一些常用的 API：
.set(property, value)：设置样式属性值.get(property)：获取样式属性值.addClass(className)：添加类名.removeClass(className)：移除类名.hasClass(className)：判断是否包含某个类名
链式调用
o- 能够支持链式调用，可以让代码更加简洁易读。
o('.example-class')
.set('background-color', 'red')
.addClass('active')选择器
o- 支持基于类名的选择器和基于 ID 的选择器。
o('.example-class') // 使用类名选择器
o('#example-id') // 使用 ID 选择器属性值的支持
o- 支持大部分样式属性的值，例如：
o('.example-class')
.set('color', 'red')
.set('font-size', '16px')
.set('padding', '10px')
.set('border', '1px solid #ccc')示例代码
我们来看一个具体的示例代码，它使用 o- 改变了一个按钮的样式，并添加了一个点击事件来触发样式的改变：
<!-- HTML --> <button id="example-btn">按钮</button>
-- -------------------- ---- ------- -- -- ------ - - - ---- ---- ----- --- - ----------------- --------------------------- ------ --------------- ---------- - --------------------------- ------- --
在这个示例中，我们首先使用 o('#example-btn') 获取了一个 ID 为 example-btn 的按钮元素，并使用 set() 方法将其背景色修改为了红色。接着，我们通过 on() 方法给按钮添加了一个点击事件，当按钮被点击时，背景色会被改变为蓝色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9c3d1de16d83a66e6e