HTML 页面中的 tabindex 属性用于控制页面中可聚焦元素（如按钮、链接等）的顺序。在许多情况下，我们需要动态地更改 tabindex 值以实现一些交互效果，那么，在 JavaScript 中是否可以做到呢？
答案是肯定的
JavaScript 可以通过修改元素的 tabindex 属性来实现动态控制聚焦顺序的目的。我们可以使用以下代码将某个元素的 tabindex 设为 1：
const element = document.getElementById('my-element');
element.tabIndex = 1;如何使用 tabindex 属性
设置不同元素的 tabindex
在 HTML 中，tabindex 的默认值为 0，表示元素会按照 DOM 结构进行聚焦。如果我们需要更改元素的聚焦顺序，则可以手动设置该元素的 tabindex 属性。
例如，我们可以设置一个文本框的 tabindex 为 1，那么在按下 Tab 键时，文本框就会被第一个聚焦。示例代码如下：
<input type="text" id="my-input">
<button>按钮</button>
<script>
const input = document.getElementById('my-input');
input.tabIndex = 1;
</script>动态更改 tabindex
JavaScript 允许我们在运行时动态更改元素的 tabindex 值。例如，当用户点击某个按钮时，我们可能需要使其他元素或按钮变为聚焦状态，这时就可以使用 tabindex 属性来实现。
示例代码如下：
-- -------------------- ---- ------- ------- ----------------- ---------- ---------- ---------- -------- ----- ------- - ------------------------------------- ----- ------- - ------------------------------------------- --------------------------------- -- -- - -- -- - --- ---------------- - -- ---------------- --- ---------
注意事项
在使用 tabindex 属性时，需要注意以下几点：
- tabindex 值必须是整数。
- 如果多个元素的 tabindex 值相同时，它们的聚焦顺序将按照 DOM 结构进行。
- 将 tabindex 设置为负值或不设置 tabindex 不会使元素变为无法聚焦状态，它们仍然可以通过 JavaScript 聚焦。
总结
JavaScript 可以动态地更改元素的 tabindex 值，从而实现动态控制聚焦顺序的目的。使用 tabindex 属性时需要注意一些细节，例如，它只接受整数值，并且如果多个元素的 tabindex 相同，则它们将按照 DOM 结构进行聚焦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30095