可通过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 类名。
以下是一个简单示例，展示如何实时显示某个元素的类名：
function updateClassNames() { const targetElement = document.querySelector('#myElement'); // 替换为你的选择器 const output = document.getElementById('class-output');if (targetElement) {output.textContent = '当前类名: ' + targetElement.className;} else {output.textContent = '未找到元素';}}
// 每秒更新一次setInterval(updateClassNames, 1000);
目标元素
结合 Übersicht 的 shell 脚本动态注入数据
如果你希望从外部来源（如网页、API）抓取 HTML 并提取类名，可以在 Übersicht 小部件中调用 shell 脚本。
立即学习“前端免费学习笔记（深入）”；
例如，使用 curl 获取网页片段，并通过 jq 或 sed/awk/grep 提取特定元素的 class 属性：
# 在 widget 的 head 部分定义 data sourcedata={{ "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 类名的实时监控与展示。不复杂但容易忽略的是权限和跨域问题——确保本地脚本能访问目标资源。
以上就是Mac Übersicht小部件实时显示HTML中CSS类名的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595918.html
微信扫一扫
支付宝扫一扫
