大家好，欢迎来到IT知识分享网。

本章目标

• 掌握行内样式的操作
• 掌握类样式的操作

本章任务

• 能够完成元素的隐藏显示案例
• 能够完成列表的高亮激活案例

• 能够完成二维码显示隐藏效果
• 能够完成tab栏案例

样式属性

在开发 Web 应用的过程中很多时候我们都需要使用 JavaScript 动态改变元素的样式，例如：网页上的开关灯效果、网站的换肤效果、点击按钮实现动画效果等，都需要通过 JavaScript 修改元素的样式。

使用 JavaScript 修改元素样式依然是操作 DOM 元素的属性，HTML 标签中和样式相关的两个属性有两个分别是 class 和 style，本章将来学习这两个属性的使用方式。

样式操作

接下来我们一起来学习如何通过 JavaScript 动态修改元素的样式。在开发网页的过程中标签有两种设置样式的属性：class 和 style。所以通过 JavaScript 动态修改样式就是修改这两个属性。

修改行内样式

我们可以使用 DOM 元素的 style 属性修改元素的行内样式。

div.style.backgroundColor = 'black'
div.style.color = 'white'

元素的 style 是一个对象，这个对象下的属性对应 CSS 中的样式属性(你可以在控制台打印 div 元素的 style 属性查看)。

复合样式属性名称，例如：background-color、margin-left等，对应的 DOM 属性名称为驼峰命名，上面两个属性对应 DOM 中 style 下的 backgroundColor、marginLeft。这么转换的原因是因为样式属性名 background-color 中的短横线不能作为变量名称。

案例：开关灯

• 需求：

• 按钮默认文本为关灯，页面背景为白色
• 点击按钮，如果当前是开灯状态，则按钮文字改为开灯，页面背景改为黑色

• 点击按钮，如果当前状态是关灯状态，则按钮文字改为关灯，页面背景改为白色

• 代码

let btn = document.querySelector('#btn');
    btn.onclick = function () {
      // 此处的 this 是点击的按钮对象
      if (this.value === '关灯') {
        this.value = '开灯';
        document.body.style.backgroundColor = 'black';
      } else if (this.value === '开灯') {
        this.value = '关灯';
        document.body.style.backgroundColor = 'white';
      }
    };

修改类样式

通过行内样式如果同时修改多个样式属性的话，代码会比较容易，假设我们要同时修改元素的背景颜色、高度、宽度和透明度，来看代码：

div.style.backgroundColor = 'black';
div.style.width = '100px';
div.style.height = '100px';
div.style.opacity = 0.5;

这段代码中前半部分的 div.style. 重复了四次，如果我们改为类样式，代码会更简单，下面我们来看如何修改元素的类样式。

HTML 标签中类样式对应的属性名称是 class，class 在 JavaScript 中是关键字不能直接作为变量或者属性名称。所以 DOM 中对应标签的 class 属性被修改为了 classsName。下面我们重新来实现上面的案例。

/* 类样式 */
.cls {
  width: 100px;
  height: 100px;
  opacity: 0.5;
  background-color: 'black';
}

div.className = 'cls';

我们还可以通过 setAttribute() 来设置 class 属性。此处需要注意的是 setAttribute() 设置的是 HTML 元素的属性，如果修改类样式的话，属性名称直接写 class。

div.setAttribute('class', 'cls');

注意：如果一个 div 本来有多个样式属性，我们通过 DOM 修改 className 的时候会把原来的样式属性覆盖掉，稍后通过案例来演示。

案例：点击按钮控制 div 显示隐藏

• 需求：

• 点击按钮，如果当前是显示状态，让 div 隐藏，更改按钮文字
• 点击按钮，如果当前是隐藏状态，让 div 显示，更改按钮文字

• 代码：

let btn = document.querySelector('#btn');
let isHide = false;
btn.onclick = function () {
  let div = document.querySelector('.cls');
  if (isHide) {
    isHide = false;
    this.value = '隐藏';
    div.className = 'cls show';
  } else {
    isHide = true;
    this.value = '显示';
    div.className = 'cls hide';
  }
};

案例：列表中高亮显示激活项

设置菜单项中当前项高亮显示

• 需求

• 点击菜单项目，让当前项高亮显示其它项目取消高亮显示

• 代码

let lis = document.querySelectorAll('.nav .f-item');
for (let i = 0; i < lis.length; i++) {
  let li = lis[i];
  li.onclick = function () {
    // 让其它项都去除激活样式
    for (let j = 0; j < lis.length; j++) {
      let item = lis[j];
      item.className = 'f-item curser';
    }
    // 让当前项目设置激活样式
    this.className = 'f-item curser active';
  };
}

classList

在上面的案例中我们使用 className 属性修改类样式的时候，必须知道该元素上已经存在的类样式，这在实际编码的过程中比较麻烦。HTML5 中新增了一个操作类样式的 API classList，可以方便的添加、删除、切换、替换类样式。

• classList 中的方法

• add()：添加类样式
• remove()：移除类样式

• toggle()：切换类样式
• replace()：替换类样式

下面我们使用这组 API 重新实现上面的激活当前点击项的案例。首先使用 add() 和 remove() 来实现。

const lis = document.querySelectorAll('.nav .f-item');
for (let i = 0; i < lis.length; i++) {
  const li = lis[i];
  li.onclick = function () {
    // 让其它项都去除激活样式
    for (let j = 0; j < lis.length; j++) {
      const item = lis[j];
      // 移除激活样式
      item.classList.remove('active');
    }
    // 添加激活样式
    this.classList.add('active');
  };
}

通过 add() 和 remove() 实现该案例我们不需要知道当前元素还有哪些类样式。

下面再来使用 toggle() 实现显示隐藏的案例。

const btn = document.querySelector('#btn');
let isHide = false;
btn.onclick = function () {
  const div = document.querySelector('.cls');
  if (isHide) {
    isHide = false;
    this.value = '隐藏';
  } else {
    isHide = true;
    this.value = '显示';
  }
  // 切换元素的 hide 类样式
  div.classList.toggle('hide');
};

toggle() 方法的作用是，如果元素具有 hide 类样式则移除，如果元素没有 hide 类样式则添加。激活项的案例中也可以使用 toggle() 实现，你可以自己尝试。

案例：显示隐藏二维码

• 需求

• 鼠标移动到最右边的小二维码上，显示左边的二维码
• 鼠标离开最右边的小二维码，隐藏左边的二维码

• 代码

• 这里要用到 DOM 中的两个事件 mouseover 和 mouseout
• mouseover 鼠标进入元素范围执行

• mouseout 鼠标离开元素范围执行

// 1.获得要操作的对象
const nodeSmall = document.getElementById("node_small");
const er = document.getElementById("er");

// 2.给事件源注册事件
// 鼠标移入时的效果
nodeSmall.onmouseover = function (){
  er.classList.toggle('show');
}

// 鼠标离开时的效果
nodeSmall.onmouseout = function (){
  er.classList.toggle('hide');
}

获取元素的样式

给元素设置样式的方式有多种，可以通过 style、class 给元素设置样式，如果我们想要获取样式该如何做呢？

例如下面的 div 同时通过类样式和行内样式设置了大小、透明度等属性，如何获取 div 的样式呢？

<style>
  .size {
    height: 200px;
    padding: 10px;
  }
  .bg {
    background-color: chocolate;
  }
</style>

<div id="box" class="size bg" style="width: 200px; opacity: 0.3;"></div>

下面来获取 div 的大小、透明度和背景样式：

const box = document.querySelector('#box');
// 获取到字符串 200px
console.log(this.style.width);
// 获取到字符串 0.3
console.log(box.style.opacity);
// 获取到空字符，无法获取类样式中设置的高度
console.log(this.style.height);

console.log(this.className);

通过 style 属性只能获取到通过行内样式设置的属性，className 只能获取到类样式的名称，无法获取类样式中具体设置了哪些样式属性的值。

下面介绍一种可以获取计算过后样式值的方法，语法如下：

window.getComputedStyle('要获取样式的元素', '伪元素');

两个参数都是必须要有的。参数二中，如果没有伪元素就用 null 代替（一般都传null）。

我们通过 getComputedStyle() 方法来获取 box 的计算过后的样式：

const box = document.querySelector('#box');
const style = window.getComputedStyle(box, null);
console.log(style.width);
console.log(style.height);
console.log(style.opacity);
console.log(style.backgroundColor);

打印结果如下：

作业

tab 栏

实现如下效果

点击不同的按钮切换不同的图片