可通过JavaScript定时查询DOM元素的classList或className属性实现实时显示CSS类名，结合shell脚本调用curl获取远程HTML并解析class内容，利用setInterval每秒更新一次数据显示，同时需处理跨域与权限问题确保资源可访问。
Mac 的 Übersicht 小部件可以通过 HTML、CSS 和 JavaScript 显示实时信息，包括动态获取并显示当前页面中元素的 CSS 类名。要实现实时显示某个 HTML 元素的 CSS 类名，可以结合 DOM 查询与定时更新机制。
获取并显示元素的 CSS 类名
Übersicht 小部件运行在 macOS 桌面环境中，通过前端技术渲染内容。你可以使用 JavaScript 动态读取指定元素的 className 或 classList 属性来获取其 CSS 类名。
以下是一个简单示例，展示如何实时显示某个元素的类名：
<script>
function updateClassNames() {
const targetElement = document.querySelector('#myElement'); // 替换为你的选择器
const output = document.getElementById('class-output');
<p>if (targetElement) {
output.textContent = '当前类名: ' + targetElement.className;
} else {
output.textContent = '未找到元素';
}
}</p><p>// 每秒更新一次
setInterval(updateClassNames, 1000);
</script></p><p><div id="myElement" class="active highlight faded">目标元素</div>
<p id="class-output"></p></p>结合 Übersicht 的 shell 脚本动态注入数据
如果你希望从外部来源（如网页、API）抓取 HTML 并提取类名，可以在 Übersicht 小部件中调用 shell 脚本。
立即学习“前端免费学习笔记（深入）”；
例如，使用 curl 获取网页片段，并通过 jq 或 sed/awk/grep 提取特定元素的 class 属性：
# 在 widget 的 head 部分定义 data source
data={{
"classes": `curl -s "https://example.com" | grep -o '<div id="status"[^>]*>' | sed -n 's/.*class="\([^"]*\)".*/\1/p'`
}}
然后在 HTML 中显示：
<p>远程元素类名: ${data.classes}</p>
样式与实时性优化
为了提升可读性，可以用 CSS 高亮类名，或根据类名变化改变颜色：
.highlight {
background-color: yellow;
}
.active {
color: green;
}
.faded {
opacity: 0.6;
}
JavaScript 可根据类名动态添加视觉反馈：
if (targetElement.classList.contains('active')) {
output.style.color = 'green';
}
基本上就这些。通过组合 DOM 操作、shell 数据获取和定时刷新，你可以在 Übersicht 小部件中实现对 HTML 元素 CSS 类名的实时监控与展示。不复杂但容易忽略的是权限和跨域问题——确保本地脚本能访问目标资源。
