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

Question

我正在尝试让 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 或样式。

下面给出的答案摘要:

1. jquery 插件在 DOM 上创建 html 就绪。在 Chrome 检查器中找到创建的 html。

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

3. 在 Chrome 的 css 面板窗口中点击 + 图标并添加在第 2 步中识别的类名。

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

Answer 1

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

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

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

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

TLDR；您将更改 .ui-menu-item 的背景