封装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') {
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')