原生js进阶教程 - 16. css方法封装、类名操作 - 《原生 JavaScript 教程》

一、设置CSS
二、批量设置CSS样式
四、类名操作

一、设置CSS

getComputedStyle / currentStyle 只能获取样式，是只读的
设置 css 样式：
动态添加类名、批量设置样式
动态设置行内样式 ele.style[attr] = value

function setCss(ele, attr, value) {
    if (attr === 'opacity') {
        ele.style.filter = 'alpha(opacity=' + value * 100 + ')';
    }
    if (attr === 'float') {
        ele.style.cssFloat = value; // 标准浏览器设置 float 属性
        ele.style.styleFloat = value; // IE 设置 float 属性
        return
    }
    // 把常见的带单位的属性增加单位
    let reg = /^(width|height|(margin|padding)?(top|left|right|bottom)?)$/i;
    if (reg.test(attr) && !isNaN(value)) {
        // 如果传入的不是有效数字或者原来就带有单位时就不加单位了
        // isNaN('10px') -> true
        value += 'px'
    }
    ele.style[attr] = value;
}
let box = document.getElementById('box');
setCss(box, 'width', 100);
setCss(box, 'height', 100);
setCss(box, 'backgroundColor', 'red');

二、批量设置CSS样式

批量设置 css 样式

批量设置 css 的样式的实现思路是给一个方法传入一个对象，对象中的 key:value 分别表示一个 css 属性和属性对应的值；

const {setCss} = window.utils;
function setBatchCss(ele, batch) {
    if (typeof batch !== 'object') return;
    for (var key in batch) {
        if (batch.hasOwnProperty(key)) {
            setCss(ele, key, batch[key])
        }
    }
}
let box = document.getElementById('box');
setBatchCss(box, {
    width: 100,
    height: 100,
    backgroundColor: 'red'
});

三、封装 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'
}); // 批量设置

四、类名操作

除了直接设置元素的样式，我们还可以通过设置类名的方式统一处理样式

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

1. 判断元素是否有某一个类名

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

或者

function hasClass2(ele, className) {
    let cN = className.trim();
    // 如果在 className 中出现过，返回值是索引位置，不会是 -1，所以就会返回 true，如果没出现过就是 -1，而 -1 不等于 -1；
    return ele.className.indexOf(cN) !== -1;
}

2. 增加类名

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

3. 移除类名

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 属性，值是一个类数组对象，里面包含了该元素全部的类名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="box" id="box">我是个div</div>
<button class="btn primary one two three" id="btn">我是一个按钮</button>
<script src="js/utils.js"></script>
<script src="js/5-classList.js"></script>
</body>
</html>

1. classList 对象

let btn = document.getElementById('btn');
let box = document.getElementById('box');
console.log(bot.classList)
// classList 对象
/*
* DOMTokenList(5) [
* 0: "btn"
* 1: "primary"
* 2: "one"
* 3: "two"4: "three"
* length: 5
* value: "btn primary one two three"__proto__: DOMTokenList
* ]
*
* */

classList 还有对应的类名的添加、删除、切换等方法

增加类名

ele.classList.add(class1, class2)

btn.classList.add('six', 'seven', 'eight');
console.log(btn.classList);

移除类名

ele.classList.remove()

btn.classList.remove('one');
console.log(btn.classList);

切换类名（如果之前有就移除，如果之前没有就添加）

ele.classList.toggle(‘class1’);

btn.onclick = function () {
    box.classList.toggle('hide');
};