css两个切换用一个js

CSS是前端开发中非常常用的技术，常常需要用到JS来达到更加复杂的效果。而CSS中有许多切换效果，本篇文章将介绍用一个js模块实现两个切换效果

// 切换目标元素的 class
function toggleClass(obj,className) {
  obj.classList.toggle(className);
}

// 切换目标元素的 style.display 属性
function toggledisplay(obj) {
  if (obj.style.display === 'none') {
    obj.style.display = 'block';
  } else {
    obj.style.display = 'none';
  }
}

这里我们实现了两个切换效果，一个是切换目标元素的class，另一个则是切换目标元素的display属性。这两个函数都只接受两个参数，分别是目标元素以及目标状态。

为了方便使用这两个切换函数，我们可以再封装一层函数：

// 封装后的切换函数
function toggle(obj,type,className) {
  switch (type) {
    case 'class':
      toggleClass(obj,className);
      break;
    case 'display':
      toggledisplay(obj);
      break;
    default:
      break;
  }
}

这个函数接受三个参数，分别是目标元素，切换类型以及目标状态。利用 switch-case 语句，根据不同的类型，来调用不同的切换函数。这样我们就可以通过调用这个函数来实现两个切换效果。

总结：
这个用一个js模块实现两个切换效果的代码非常简单而实用，可以帮助我们简化代码。如果我们将这个模块写成一个类并发布到NPM上，可以帮助大家更好的维护代码和代码的可复用性。