高亮html元素答案

【问题标题】：highlight html elements高亮html元素
【发布时间】：2012-02-04 01:42:40
【问题描述】：

如何使用 javascript 突出显示 html 元素，以检查链接到该元素的 html 和 css 选择器。突出显示可能只是边框或背景的更改（因此它不会破坏布局）以及显示 html 元素和连接到该元素的 css 选择器的工具提示。

【问题讨论】：

使用浏览器中的开发者工具怎么样，现在都有了？
如果您想要自定义解决方案，您必须更具体地了解您遇到的问题。
您自己尝试过吗？当您无法解决更具体的问题时，我会先尝试一下然后发布。这是一个很好的起点：api.jquery.com/category/selectors

【解决方案1】：

你可以这样做：

$('div, a, span, p').hover(function(){
    $(this).css({ "border": "2px solid red" });
    console.log($(this));
},function(){
    $(this).css({ "border": "none" });
});

我会使用 Firebug (FF) 或 Console (Chrome) 来检查元素。

【讨论】：

你至少应该提到你正在使用 jQuery。

【解决方案2】：

如果我对您的理解正确，听起来您只需要为 Firefox 使用 Firebug 或为 IE 使用开发工具 (F12) 即可。每个浏览器都有它们。

它们让您可以突出显示任何内容并使用任何 css 选择器。绝对是 Web 开发人员必备的工具。

【讨论】：

【解决方案3】：

您是否考虑过使用像 Firebug 这样的工具？这做得很好，显示页面的来源并在鼠标悬停时突出显示元素。此外，在三大浏览器（Chrome、FF、IE）的最新版本中，有一个内置的检查器。在 FF 10 中，右键单击任何内容并单击检查元素。在 Chrome 中，过程是相同的。在 IE 9 中，按 F12，然后按 Ctrl+B 并单击所需的元素。

【讨论】：

【解决方案4】：

如果你使用谷歌浏览器，你可以在视图/开发者/开发者工具中启用开发者工具。选择此菜单时，在浏览器的底部将使用一个菜单放置框架（在这里您应该单击“元素”按钮）。在此菜单下，您将看到文档的来源。将鼠标悬停在浏览器中的某些标签（即：）上时，该元素将突出显示，您将能够看到突出显示的标签的属性。

【讨论】：