在 JavaScript 中获取 ARIA 扩展值

简介

ARIA（Accessible Rich Internet Applications）是一种为网络应用程序添加可访问性的技术。它提供了一组属性，用于描述应用程序的交互和用户界面组件。这些属性允许屏幕阅读器和其他辅助技术来理解和导航应用程序的内容，从而帮助用户以更自由的方式使用应用程序。

在本文中，我们将探讨如何在 JavaScript 中获取 ARIA 扩展值。

获取 ARIA 扩展值

通过 JavaScript，可以使用 getAttribute 方法获取元素上的 ARIA 扩展属性的值。

const element = document.querySelector('#my-element');
const ariaValue = element.getAttribute('aria-expanded');
console.log(ariaValue); // 打印 aria-expanded 属性的值

此外，还可以使用 dataset 属性获取 data-* 的自定义数据属性和 ARIA 扩展属性的值。

const element = document.querySelector('#my-element');
const ariaValue = element.dataset['myAriaValue'];
console.log(ariaValue); // 打印自定义的 aria 扩展属性的值

示例

以下是一个代码示例，展示如何使用 JavaScript 获取 ARIA 扩展值。

<div id="example" tabindex="0" aria-expanded="false" data-custom-aria-value="foo">This is an example</div>

const exampleElement = document.querySelector('#example');

// 获取 tabindex 属性的值
const tabindex = exampleElement.getAttribute('tabindex');
console.log(tabindex); // 打印 0

// 获取 aria-expanded 属性的值
const expanded = exampleElement.getAttribute('aria-expanded');
console.log(expanded); // 打印 false

// 获取自定义的 aria 扩展属性的值
const customValue = exampleElement.dataset['customAriaValue'];
console.log(customValue); // 打印 foo

结论

在本文中，我们探讨了如何在 JavaScript 中获取 ARIA 扩展值。可以通过 getAttribute 方法或 dataset 属性来获取属性值。这样，我们可以更轻松地操作和管理应用程序的交互和用户界面组件，并为所有用户提供相同的体验和可访问性。