问题标签 [cssom]

基本上，我正在尝试为 HTML 文档上的所有背景图像 url() 分配一个鼠标悬停函数()。当我将鼠标悬停在一个链接上时，我希望能够访问/触发每个背景图像 url()，就好像它正在单击一个 href 链接一样。

我尝试应用 CSSImageValue，它是 CSS 对象模型 (CSSOM) 的一个子集。如何使此代码正常工作？

我已经阅读了渲染树以及它是如何由 CSSOM 和 DOM 树构成的，并且我希望在我的网站上实现最佳 UI 性能。

我想知道 - 我可以为外部 CSS 文件提供哪些最佳实践，以便它允许最快的 CSSOM 并因此提供最快的渲染树构建？

I'm using :root to create some CSS variables. Is it possible to create them with JavaScript instead of CSS? Below is a simple example:

目前，我正在构建一个从 JSON 文件、CSS 选择器和样式生成的应用程序。我目前正在尝试获取影响元素的所有样式，我目前有一个不好的解决方案。目前，我的每个选择器都将相同的自定义变量设置为继承 false 到它的 id，然后我循环遍历元素并根据 id 是什么从 id 中删除该变量，直到它再次为空，然后我将它们添加回每个 CSS 选择器并使用我拥有的数组。

这个解决方案很糟糕，因为当我删除变量并且它线性缩放时它会强制进行大量回流，而且随着元素拥有的子元素越多，它会变得越来越慢。

我可以通过使用查询选择器循环每个选择器来在启动时获得所有影响元素，但是当我在它启动后添加一个元素时，为我添加的每个元素的每个 CSS 选择器运行查询选择器并比较它们太昂贵了。

另一种解决方案可能是编写一个反向算法，但是使用那个，由于所有选择器（如 nth-child、first、元素、按属性等）的绝对复杂性，它会非常复杂 -

有什么想法吗？

我正在使用 CSS 来隐藏表单元素：

然后用 JavaScript 向它们展示：

.elementor-select-wrapper::before问题在于隐藏选择元素中的向下箭头所需的伪元素。我需要使用 JavaScript onclick 事件来显示箭头。我试过document.getElementsByClassName()了，但没有奏效。

您可以在此处查看测试页：测试页。单击名字或姓氏以显示字段（比上面列出的更多），您会看到向下箭头是来自选择元素的任务。

据说要计算屏幕真实分辨率，我需要screen.width乘以window.devicePixelRatio. 这件事在我的一台笔记本电脑上工作得非常好，window.screen.width = 1280，乘以像素比 (2) = 2560，根据系统信息这是正确的。

但在我的第二台笔记本电脑上，screen.width = 1440px，像素比为 2，宽度为 2880px，但在系统信息中说我的分辨率仍然是 2560 x 1600。

那么在这种情况下如何计算屏幕的分辨率呢？

屏幕宽度

真实分辨率

PS：我的第二台笔记本电脑是 13" macbook pro 2020

PPS：嗯，我意识到这取决于我的设置，有没有办法知道设备的分辨率，因为我的设置可能会有所不同？

我假设，就像链接标签中使用的媒体查询一样，我们在 CSS 文件中定义的媒体查询被浏览器根据其媒体查询规则解析/覆盖或省略（实际上我知道，虽然 CSS链接标签请求的带有不匹配媒体的文件无论如何都会被下载，它们不会阻塞浏览器）。那么，从 CSSOM 构建优化的角度来看，将适用于所有屏幕设备的通用 CSS 规则与特定于移动设备的 CSS 规则分开并将特定于移动设备的规则封装在最大宽度媒体查询中不是更好吗？这样浏览器将解析更少的 CSS 来构建 CSSOM，而无需为平板电脑、台式机等覆盖它们。我想知道这是否会影响 CSSOM 性能的构建还是只是矫枉过正？