如何查找 Shadow DOM 中的隐藏样式？

查看 Shadow DOM 以发现隐藏的样式

您偶然发现了一个具有有趣占位符颜色的网站，并且想要复制其精确的颜色树荫。在 Chrome 开发工具中检查元素时，您遇到了障碍：看不到与占位符相关的信息。

不用担心，因为秘密在于探索影子 DOM。以下是解开谜团的方法：

1. 深入了解设置：首先单击 Chrome 开发工具面板中的齿轮图标，然后选择“首选项”选项卡。
2. 释放影子 DOM：在元素部分中，找到标有“显示用户代理影子 DOM”的复选框并选中它。
3. 显示隐藏领域：使用影子启用 DOM，您现在将看到与您正在检查的输入元素关联的占位符元素。
4. 查看样式：单击占位符元素以访问其 CSS 属性并发现难以捉摸的颜色规范。

对于您提供的具体示例，您将观察到占位符元素携带以下类：

.-webkit-input-placeholder

研究其计算样式将揭示占位符的颜色，包括 alpha 值。现在，您已完全准备好复制那种诱人的占位符颜色。

以上是如何查找 Shadow DOM 中的隐藏样式？的详细内容。更多信息请关注PHP中文网其他相关文章！