如何使用 Chrome Inspector 显示 jquery 插件的弹出 css

Posted 2023-03-06

【中文标题】如何使用 Chrome Inspector 显示 jquery 插件的弹出 css

【英文标题】：How to use Chrome Inspector to show the popup css for a jquery plugin

【发布时间】：2016-09-04 00:01:22

【问题描述】：

我正在尝试让 Chrome 检查器向我显示 jquery 插件中使用的类名及其属性，以便我可以根据需要覆盖和调整它们。但是 Chrome 检查器 css 窗口不显示它。

我正在使用一个插件，当我点击一个文本框时，它会显示一个列表项的弹出窗口。 See jsfiddle

$('#example-1').timeselect(
   'step': 15,
    autocompleteSettings: 
        autoFocus: true
    
);

我想更改突出显示的行背景颜色和文本大小，如下图所示

我在this 中阅读答案以查看 Chrome 检查器中的悬停 css 我需要检查窗口中的 .hov 样式。

我将它设置为什么元素状态并不重要。 Chrome css 窗口不会显示我尝试更改的 2 个属性的 css，即突出显示的行字体大小和背景颜色。它根本没有在窗口中显示那种灰色。它只允许我更改文本框的静态字体大小，而不是单击文本框并且悬停处于活动状态时的文本大小。

我查看了插件的javascript code on GitHub。没有参考。没有引用任何应用于它的 CSS 或样式。

下面给出的答案摘要：

jquery 插件在准备好的 DOM 上创建 html。在 Chrome 检查器中找到创建的 html。

使用检查器突出显示相关的 html 创建元素，并记下当我直观地突出显示一行时动态插入到 html 中的 css 类名称。

在 Chrome 的 css 面板窗口中单击 + 图标并添加在步骤 2 中标识的类名称。

查看和调整特定类的css属性

【问题讨论】：

那是 javascript。当您悬停一个项目时，javascript 添加一个类（如element-hover 或类似的东西）并更改样式。那不是伪状态:hover，它是一个普通的类名

如何使用浏览器工具来确定通过 javascript 添加的类。 GitHub 源代码也没有显示对任何类名或样式的引用。

【参考方案1】：

在小提琴中，您可以检查输入框（单击以输入文本的位置）并观察单击和关闭时的 HTML 变化。如果您在打开和关闭时没有看到元素突出显示（这通常意味着元素正在更改，例如 display:none; 到 block 的样式），那么您可以开始将鼠标悬停在检查器中的元素上。

当您将鼠标悬停在检查器中的元素上时，您会看到要点亮的块。有时你想要的块包含在一个更大的块中，所以你必须遍历这个块（使用它旁边的黑色箭头打开元素）

您正在寻找<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1"... 此元素包含所有选择选项。

在下图中，我找到该块的方法是检查“基本示例”的实际输入。这向我展示了带有 id #example-1 的完全遍历的输入。然后，由于我单击了其他地方，实际选项被隐藏了，所以我再次单击输入以打开它们，我注意到检查器中发生了一些变化。所以，我只是在选项框打开时将鼠标移到检查器中的元素上。我看到 div（在检查器中以灰色突出显示）是选项的包含框，然后我只是从那里遍历。

TLDR;你要改变.ui-menu-item的背景

【讨论】：

感谢您的回答。 ui-menu-item 是列表中的每个项目。当我将鼠标移到它上面时，我看到突出显示的行是ui-state-focus。这是包含灰色背景的类。如何让这个 css 类显示在 Chrome 检查器窗口中，以便我可以在那里更改它以进行预览？ Chrome 检查器可以做到这一点吗？就像我无法查看元素 ui-menu-item 的焦点事件

@devc2，通常在检查器的 CSS 面板底部有 :hover, :before, :after 伪元素。我不太确定悬停。但是，基本上，它的工作方式是； jQuery 使用.focus 来更改类。因为当它处于焦点时我们看不到这个类，所以我们必须搜索 CSS。在 CSS 面板中，您将看到该元素的主类。在该类的右上角，您将看到哪个 CSS 控制它。在这种情况下，它是jquery-ui.css。右键单击jquery-ui.css，然后单击“在新选项卡中打开”。从那里，您可以搜索ui-state-focus。

@devc2，当您在 CSS 中时（在新选项卡中打开后），只需点击 Ctrl + F（或 Mac 上的 cmd + F）即可在页面内搜索。并搜索ui-state-focus。点击“下一个”箭头，直到找到您可能正在寻找的那个。它可能需要更多的 slooting，但你会找到一个有背景图像的。这是您可以覆盖的。

@devc2，如果您想尝试您的更改，请返回检查器。由于我们看不到ui-state-focus，您可以点击 CSS 面板右上角的“+”。这将添加一个新的空白样式。只需将其命名为 .ui-state-focus（您可能需要添加更多父 CSS 才能使其正常工作），然后在其中添加您的样式。

谢谢。在 css 面板中添加 ui-state-focus 使其显示。