JS实现页面元素失去焦点恢复原始样式的方法及实例

在网页开发中，有时候我们希望页面元素在失去焦点后能够恢复到原始样式，比如重置边框颜色、背景色等。这可以通过JavaScript和CSS来实现。下面，我将详细讲解如何使用JavaScript来实现这一功能，并给出一个实例代码。

方法一：使用JavaScript事件监听

1.1 HTML结构

首先，我们创建一个简单的HTML结构，包含一个输入框，用于演示失去焦点后的样式变化。

<input type="text" id="myInput" value="请输入内容...">

1.2 CSS样式

接下来，为输入框设置一个初始样式，以及失去焦点时的样式。

/* 初始样式 */
#myInput {
  border: 1px solid #000;
  padding: 5px;
  font-size: 16px;
}

/* 失去焦点样式 */
#myInput:focus {
  border: 1px solid red;
}

1.3 JavaScript代码

使用JavaScript监听输入框的focus和blur事件，实现样式的切换。

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

// 失去焦点时恢复原始样式
input.addEventListener('blur', function() {
  this.style.border = '1px solid #000';
});

// 获取焦点时改变样式
input.addEventListener('focus', function() {
  this.style.border = '1px solid red';
});

方法二：使用CSS伪类:focus

CSS伪类:focus可以直接应用于具有焦点的元素，实现失去焦点后恢复原始样式。

2.1 CSS样式

将CSS样式修改为使用:focus伪类。

/* 初始样式 */
#myInput {
  border: 1px solid #000;
  padding: 5px;
  font-size: 16px;
}

/* 获取焦点时改变样式 */
#myInput:focus {
  border: 1px solid red;
}

这样，当输入框失去焦点时，会自动恢复到初始样式。

总结

通过以上两种方法，我们可以实现页面元素在失去焦点后恢复原始样式。在实际开发中，可以根据具体需求选择合适的方法。希望这篇文章能帮助你更好地理解和应用这一功能。