内联焦点样式 - JavaScript

在Web开发中，在元素被点击、滑过或获得焦点时，通过改变元素的样式来增强用户交互体验是一个常见的操作。本篇文章将介绍如何使用JavaScript来实现内联焦点样式。

HTML元素的焦点状态

当用户在页面上点击某个可编辑的HTML元素（比如输入框、文本域等）时，该元素将获得焦点。在HTML中，可以使用:focus选择器来设置元素获得焦点时的样式，示例如下：

<style>
    input:focus {
        background-color: #f1f1f1;
    }
</style>
<input type="text" placeholder="输入框" />

上述代码中，当用户点击输入框时，输入框会变成灰色背景，这就是获得焦点时的效果。

JavaScript实现内联焦点样式

除了可编辑元素外，我们通常也需要在其他元素（如按钮）上实现焦点效果。但这类元素不是可编辑元素，因此就不能像上述HTML代码一样利用:focus选择器来实现焦点效果了。

在这种情况下，可以使用JavaScript来实现焦点样式。JavaScript提供了两种方式来实现焦点样式：使用onfocus事件属性或使用类名切换。

使用onfocus属性

onfocus事件属性触发于元素获得焦点时，可以在该事件处理函数中实现焦点样式的改变。

示例如下：

<style>
    .btn-focus {
        background-color: cyan;
    }
</style>
<button onfocus="this.classList.add('btn-focus')" onblur="this.classList.remove('btn-focus')">按钮</button>

上述代码中，我们在按钮上添加了onfocus和onblur事件，当按钮获得焦点时，就会添加类名btn-focus，从而改变按钮的样式。当焦点离开按钮时，就会移除该类名。

使用类名切换

类名切换是一种更加优雅的方法，它可以通过添加或移除类名来改变元素的样式。这里我们使用事件监听器来监听焦点事件，当焦点事件发生时，通过类名切换来改变元素样式。

示例如下：

<style>
    .btn-focus {
        background-color: cyan;
    }
</style>
<button class="btn" id="btn">按钮</button>
<script>
    const btn = document.getElementById('btn');
    btn.addEventListener('focus', (event) => {
        event.target.classList.add('btn-focus');
    });
    btn.addEventListener('blur', (event) => {
        event.target.classList.remove('btn-focus');
    });
</script>

上述代码中，我们在JavaScript中添加了focus和blur事件监听器，当按钮获得或失去焦点时，就会添加或移除类名btn-focus来改变按钮的样式。

总结

以上就是使用JavaScript实现内联焦点样式的两种方法：使用onfocus属性和使用类名切换。这两种方法都可以实现焦点样式的改变，而且使用后者能够将逻辑与样式分离，使代码更加清晰。