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')