可通过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 类名。
以下是一个简单示例，展示如何实时显示某个元素的类名：
目标元素
结合 Ü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 ']*>' | sed -n 's/.*class="\\([^"]*\\)".*/\\1/p'`
}}
然后在 HTML 中显示：
远程元素类名: ${data.classes}
样式与实时性优化
为了提升可读性，可以用 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 类名的实时监控与展示。不复杂但容易忽略的是权限和跨域问题——确保本地脚本能访问目标资源。
相关文章
简历html5怎么写_HT5用section分模块加CSS排版制个性化简历【编写】
ie怎么更换html5_IE浏览器升级到IE9+或更换Edge支持HTML5【更换】
HTML5怎么设置视频播放器皮肤_自定义视频控制条样式的教程【教程】
html5 具体怎么用_html5用标签结构CSS样式JS交互实现页面具体功能【使用】
HTML5span标签怎么用_行内文本样式控制方法【指南】
相关标签:
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
