一、设置CSS

  • getComputedStyle / currentStyle 只能获取样式，是只读的
  • 设置 css 样式：
    动态添加类名、批量设置样式
    动态设置行内样式 ele.style[attr] = value
  1. function setCss(ele, attr, value) {
  2.     if (attr === 'opacity') {
  3.         ele.style.filter = 'alpha(opacity=' + value * 100 + ')';
  4.     }
  5.     if (attr === 'float') {
  6.         ele.style.cssFloat = value; // 标准浏览器设置 float 属性
  7.         ele.style.styleFloat = value; // IE 设置 float 属性
  8.         return
  9.     }
  10.     // 把常见的带单位的属性增加单位
  11.     let reg = /^(width|height|(margin|padding)?(top|left|right|bottom)?)$/i;
  12.     if (reg.test(attr) && !isNaN(value)) {
  13.         // 如果传入的不是有效数字或者原来就带有单位时就不加单位了
  14.         // isNaN('10px') -> true
  16.         value += 'px'
  17.     }
  18.     ele.style[attr] = value;
  19. }
  21. let box = document.getElementById('box');
  22. setCss(box, 'width', 100);
  23. setCss(box, 'height', 100);
  24. setCss(box, 'backgroundColor', 'red');

二、批量设置CSS样式

  • 批量设置 css 样式

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

  1. const {setCss} = window.utils;
  4. function setBatchCss(ele, batch) {
  5.     if (typeof batch !== 'object') return;
  6.     for (var key in batch) {
  7.         if (batch.hasOwnProperty(key)) {
  8.             setCss(ele, key, batch[key])
  9.         }
  10.     }
  11. }
  12. let box = document.getElementById('box');
  13. setBatchCss(box, {
  14.     width: 100,
  15.     height: 100,
  16.     backgroundColor: 'red'
  17. });

三、封装 CSS 方法：

  • 封装一个 CSS 方法，既可以实现获取样式又可以实现设置样式，还可以批量设置样式；根据传入的参数重载方法；
  1. let box = document.getElementById('box');
  3. const {getCss, setBatchCss, setCss} = window.utils;
  5. function css(ele, param, val) {
  6.     // 对传入不同参数时进行不同的处理——重载
  7.     if (typeof param === 'object') {
  8.         // 如果传入一个对象
  9.         setBatchCss(ele, param);
  10.     }
  11.     if (typeof param === 'string' && typeof val === 'undefined') {
  12.         // 此时 param 传了一个字符串，val 没传，是要获取
  13.         return getCss(ele, param);
  14.     }
  15.     if (val !== 'undefined') {
  16.         setCss(ele, param, val)
  17.     }
  18. }
  20. console.log(css(box, 'width')); // 获取
  21. css(box, 'height', 100); // 设置
  22. css(box, {
  23.     height: 100,
  24.     backgroundColor: 'red'
  25. }); // 批量设置

四、类名操作

  • 除了直接设置元素的样式，我们还可以通过设置类名的方式统一处理样式
  1. let box = document.getElementById('box');

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

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

或者

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

2. 增加类名

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

3. 移除类名

  1. function removeClass(ele, className) {
  2.     className = className.trim();
  3.     let ary = className.split(' ');
  4.     ary.forEach(item => {
  5.         item = item.trim();
  6.         let reg = new RegExp(`${item}`, 'g');
  7.         ele.className = ele.className.replace(reg, '')
  8.     })
  9. }
  10. removeClass(box, 'box zero');

五、classList 对象和操作；

  • 元素对象自带 classList 属性，值是一个类数组对象，里面包含了该元素全部的类名。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide {
  8.             display: none;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <div class="box" id="box">我是个div</div>
  14. <button class="btn primary one two three" id="btn">我是一个按钮</button>
  15. <script src="js/utils.js"></script>
  16. <script src="js/5-classList.js"></script>
  17. </body>
  18. </html>

1. classList 对象

  1. let btn = document.getElementById('btn');
  2. let box = document.getElementById('box');
  3. console.log(bot.classList)
  4. // classList 对象
  5. /*
  6. * DOMTokenList(5) [
  7. * 0: "btn"
  8. * 1: "primary"
  9. * 2: "one"
  10. * 3: "two"4: "three"
  11. * length: 5
  12. * value: "btn primary one two three"__proto__: DOMTokenList
  13. * ]
  14. *
  15. * */

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

增加类名
  • ele.classList.add(class1, class2)
  1. btn.classList.add('six', 'seven', 'eight');
  2. console.log(btn.classList);

移除类名
  • ele.classList.remove()
  1. btn.classList.remove('one');
  2. console.log(btn.classList);

切换类名（如果之前有就移除，如果之前没有就添加）
  • ele.classList.toggle(‘class1’);
  1. btn.onclick = function () {
  2.     box.classList.toggle('hide');
  3. };

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】