突出显示html元素

highlight html elements

本文关键字：元素 html 显示      更新时间：2023-09-26

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

您可以这样做：

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

不过，我会使用Firebug（FF）或Console（Chrome）来检查元素。

如果我理解正确，听起来你只需要使用Firebug for Firefox或Developer tools（F12）for IE之类的东西。每个浏览器都有它们。

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

您是否考虑过使用像Firebug这样的工具？这做得很好，显示了页面的源代码，并在mouseover上突出显示了元素。此外，在三种主要浏览器（Chrome、FF、IE）的最新版本中，都有一个内置的检查器。在FF 10中，在任意对象上单击鼠标右键，然后单击"检查图元"。在Chrome中，过程是相同的。在IE 9中，按F12，然后按Ctrl+B并单击所需的元素。

如果您使用谷歌chrome，您可以在View/developer/DeveloperTools中启用开发人员工具。当选择此菜单时，浏览器底部会显示一个带有菜单的框架（在这里，您应该单击"元素"按钮）。在此菜单下，您将看到文档的来源。将鼠标悬停在浏览器中的某些标记（即：）上时，该元素将高亮显示，您将能够看到高亮显示的标记的属性。

相关文章：