css方法封装

封装CSS方法 同时可以实现获取和设置样式 还可以批量处理

let box = document.getElementById('box');

const {getCss, setBatchCss, setCss} = window.utils;

function css(ele, param, val) {
  // 对传入不同参数时进行不同的处理——重载
  if (typeof param === 'object') {
    // 如果传入一个对象
    setBatchCss(ele, param);
  }
  if (typeof param === 'string' && typeof val === 'undefined') {
    // 此时 param 传了一个字符串，val 没传，是要获取
    return getCss(ele, param);
  }
  if (val !== 'undefined') {
    setCss(ele, param, val)
  }
}

console.log(css(box, 'width')); // 获取
css(box, 'height', 100); // 设置
css(box, {
  height: 100,
  backgroundColor: 'red'
}); // 批量设置

类名操作

• 通过设置类名的方式统一处理样式
• 判断元素是否有一个类名

function hasClass(ele, className) {
  // 获取该元素的所有类名，然后判断是否包含这个类名
  let cN = className.trim();
  return ele.className.includes(cN);
}
hasClass(box, 'abc')

• 增加类名

function addClass(ele, className) {
  // 如果元素有这个类名了，则不添加
  if (hasClass(ele, className)) return;
  ele.className += ` ${className}`; // 添加时要在本次添加类名前面写一个空格
}
addClass(box, 'zero');

• 删除类名

function removeClass(ele, className) {
  className = className.trim();
  let ary = className.split(' ');
  ary.forEach(item => {
    item = item.trim();
    let reg = new RegExp(`${item}`, 'g');
    ele.className = ele.className.replace(reg, '')
  })
}
removeClass(box, 'box zero');

• classList对象和操作
  • 元素对象自带 classList 属性，值是一个类数组对象，里面包含了该元素全部的类名
• classList还有对应的类名的添加 删除 切换 等方法
• 增加类名 ele.classList.add(class1,class2)
• 移除类名 ele.classList.remove()
• 切换类名 之前有 就删除 没有 就添加 ele.classList.toggle('class1')