我可以在HTML中输入变量并将其提供给CSS来更新量规读数吗？

问题描述

我试图写一些代码来读取传感器，并用ESP32制作一个显示该值的网页。

但是在带有“针”（类似于速度计之类的东西）的输出的仪表上，我可以在CSS中创建变量，也可以在CSS中创建仪表并以HTML很好地显示。 我可以通过更改CSS变量来更改量规的值，但我希望能够将此变量从HTML文件传递给CSS。

所以我可以在ESP32上处理HTML页面，更新传感器的值并显示它，似乎无法通过HTML更新CSS变量。

我想远离JavaScript，只是为了学习这项功能，我已经在学习CSS和HTML，但是如果需要，我会做。

或者我可以用PHP做到这一点吗？

有什么建议吗？

解决方法

如果要使其动态化，除了结合使用的内容重新使用JavaScript之外，别无选择。据我了解，这就像是百分比值或旋转度值。

针对您的具体情况，我建议您使用内联样式来更改指标的位置。

类似的东西：

<div style="width: 99%;"></div>

如果您与我们分享到目前为止所拥有的代码，将会有所帮助。

另外，据我了解，您仍然对这种编码还是陌生的，但是对于您来说可能确实非常有用的可能是Socket.io，您只需分配一个接收信息的端口并进行配置即可，可以将您的ESP32配置为将信息发送到该端口，尽管我对此并不十分熟悉。

,

如果您想在自己的网络上使用esp32实时刷新实时值，则必须使用websockets。 我不知道您使用的是什么服务器库，但是那里有几个websocket库。 我推荐ESP32_AsyncWebserver from Me_no_Dev。这是一个完全异步的网络服务器实现，它也包含异步的websocket。

如果成功地将其实现到项目中，并使用您提到的量规加载静态html文件，则在esp32的运行时，您可以将websocket文本消息发送到前端javascript代码。在javascript端收到消息后，您可以从此处轻松更新任何内容。

如果您对此感兴趣，我将在这里为您编写一些代码。请让我知道。