「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」。

写在前面

为了学习 jquery 源码，我们在前面几篇文章已经手写实现了 jquery 中的一些基本使用方法，如：
- 输入参数为选择器字符串，输入参数为原生 dom等进行事件绑定
- 输入参数为函数，作为页面 dom 结构加载完成后执行的回掉函数
- 多个 dom 元素，多个事件的绑定
- 链式操作
- 回滚操作节点
今天这篇文章将会，实现 css 相关的一些功能函数

获取样式

仿照 jquery 中的 css 方法，我们也需要在 my-jquery 中实现一套 css 方法
同样的，我们先定义 css 方法的使用

let res = $("div").css("background");
console.log(res);

css 方法接受一个属性名，然后返回相应的属性值
这里暂且先不实现该方法，先知道该方法的使用即可，等到下面设置样式介绍完一起实现

设置样式

同样的参考 jquery 中 css 方法的使用，在设置样式时会有有两种情况，一种是顺序参数形式，一种是传一个包含样式属性名和属性值的对象

// 设置样式1
$(".btn").css("background", "teal");

// 设置样式2
$(".btn").css({ width: "100px", height: 100 });

实现 css 方法

由上面获取样式和设置样式的分析可以知道，css 方法的参数类型会有三种形式
- 情况一：单个字符串
- 情况二：两个字符串
- 情况三：一个对象
那么我们实现 css 方法就好办了

css(...args) {
    if (args.length === 1) {
      // 情况 1、3
      if (typeof args[0] === "string") {
        // 情况 1
        return this.#getStyle(this[0], args[0]);
      } else {
        // 情况 3
        for (let j = 0; j < this.length; j++) {
          for (let i in args[0]) {
            this.#setStyle(this[j], i, args[0][i]);
          }
        }
      }
    } else {
      // 情况 2
      for (let i = 0; i < this.length; i++) {
        this.#setStyle(this[i], args[0], args[1]);
      }
    }
}

其实实现 css 方法最关键的就是区分参数类型，然后按照对应的类型，进行实现即可
根据参数个数不同，我们可以分出情况 1 和 3 与情况 2 不同
然后区分情况 1 与情况 3，只需要判断参数数据类型即可
为了方便元素样式的设置与获取，我们可以实现 #getStyle 与 #setStyle 两个私有方法
下面是 #getStyle 方法的实现，非常简单，直接调用 getComputedStyle API 即可获取计算完成之后的元素的样式

#getStyle(ele, attr) {
    // return getComputedStyle(ele, null).getPropertyValue(attr);
    return getComputedStyle(ele, null)[attr];
}

下面是 #setStyle 方法的实现，这个实现也比较简单，直接通过 dom 元素的 style 属性进行样式的设置

  #setStyle(ele, attr, value) {
      ele.style[attr] = value;
  }

小结

至此，我们已经实现了 my-jquery 中样式的获取和设置操作的方法实现
可能大家会觉得奇怪，#setStyle 和 #getStyle 这俩方法明明非常简单，为啥要单独拎出来，封装成一个方法？
- 那是因为，jquery 在样式的处理上有一些立足未来的设计
- 如果不实现 #setStyle 和 #getStyle 两个方法
- 那么这些立足未来的设计与原有的代码就会混在一起，导致代码可读性变差，极不优雅
那么这些立足未来的设计是什么呢，在下篇文章，我们会解开这些技巧

最后

今天的分享就到这里了，欢迎大家在评论区里面进行讨论 👏。
如果觉得文章写的不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰

从 0 开始开发 jquery 工具库（四）

写在前面

获取样式

设置样式

实现 css 方法

小结

最后