JavaScript实现修改伪类样式

要实现修改伪类样式，我们需要了解伪类和JavaScript操作样式的方法。

伪类

伪类是CSS中常用的表达方式，用于选择元素的一些特定状态或特殊位置。如:hover用于选中鼠标悬停在元素上的状态等，伪类选择器以冒号（:）开头，常见的伪类有下列几个：

• :hover：鼠标悬停状态
• :active：激活状态
• :focus：焦点状态
• :first-child：第一个子元素
• :last-child：最后一个子元素
• :nth-child(n)：第n个子元素

JavaScript操作样式

我们可以通过JavaScript操作DOM元素的style属性，从而改变元素的样式，如下所示：

// 获取元素
let target = document.getElementById('target');

// 修改样式
target.style.backgroundColor = 'blue';
target.style.color = 'white';

需要注意的是，JavaScript通常会将样式属性写成驼峰风格，如backgroundColor而不是background-color。

实现修改伪类样式

要实现修改伪类样式，我们可以通过添加或删除类名的方式来实现。

首先，我们需要在CSS中定义好伪类样式：

#target:hover {
  background-color: blue;
  color: white;
}

然后，通过JavaScript的classList属性添加或删除类名：

// 获取元素
let target = document.getElementById('target');

// 添加类名
target.classList.add('newClass');

// 删除类名
target.classList.remove('newClass');

我们可以通过添加或删除类名来切换伪类样式，实现如下：

// 获取元素
let target = document.getElementById('target');

// 添加鼠标悬停伪类样式
target.addEventListener('mouseenter', function() {
  target.classList.add('hoverClass');
});

// 删除鼠标悬停伪类样式
target.addEventListener('mouseleave', function() {
  target.classList.remove('hoverClass');
});

以上代码会在鼠标悬停时添加类名hoverClass，从而触发CSS中定义的:hover样式，当鼠标移开时删除该类名，恢复原来的样式。

另一个示例是通过焦点伪类:focus样式来实现输入框聚焦时背景色的变化：

// 获取输入框元素
let input = document.getElementById('input');

// 添加焦点伪类样式
input.addEventListener('focus', function() {
  input.style.backgroundColor = 'yellow';
});

// 删除焦点伪类样式
input.addEventListener('blur', function() {
  input.style.backgroundColor = 'white';
});

以上代码会在输入框聚焦时修改背景色，恢复焦点时恢复原来的样式。当然，我们也可以通过添加或删除类名的方式来实现。