一、设置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
  15. value += 'px'
  16. }
  17. ele.style[attr] = value;
  18. }
  19. let box = document.getElementById('box');
  20. setCss(box, 'width', 100);
  21. setCss(box, 'height', 100);
  22. setCss(box, 'backgroundColor', 'red');

二、批量设置CSS样式

  • 批量设置 css 样式

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

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

三、封装 CSS 方法:

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

四、类名操作

  • 除了直接设置元素的样式,我们还可以通过设置类名的方式统一处理样式
  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. }
  6. console.log(hasClass(box, 'abc')); // false
  7. 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. };