高亮html元素

如何使用javascript突出显示html元素，以检查链接到该元素的html和css选择器。突出显示可能只是边框或背景的改变（所以它不会破坏布局），并且工具提示会显示html元素和CSS选择器，并将其与该元素相关联。高亮html元素

2012-02-03 user1188068

如何在您的浏览器中使用开发者工具，他们都有这些天？ – 2012-02-03 17:33:18

如果你想要一个自定义的解决方案，你必须更具体地说明你卡在哪里。 – 2012-02-03 17:35:14

你有没有尝试过自己？当你无法解决一个更具体的问题时，我会先试一试然后发布。这里是一个开始的好地方：http://api.jquery.com/category/selectors/ – Paul 2012-02-03 17:37:33

你可以做这样的事情：

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

我会使用萤火虫（FF）或控制台（Chrome）即可，虽然检查的元素。

来源

2012-02-03 17:35:11 nerdburn

你应该至少提到你正在使用jQuery。 – 2012-02-03 17:36:17

你有没有考虑过使用类似Firebug的工具？这非常出色，显示了页面的来源并突出显示了mouseover上的元素。此外，在三大浏览器（Chrome，FF，IE）的最新版本中，还有一个内置的检查器。在FF 10中，右键单击任何内容并单击检查元素。在Chrome中，过程是一样的。在IE 9中，按F12，然后按Ctrl + B并单击所需的元素。

来源

2012-02-03 17:36:34

如果我的理解正确，听起来像你只需要使用类似Firefox的Firebug或IE的开发工具（F12）。每个浏览器都有它们。

他们让你突出显示任何东西，并与任何css选择器一起玩。绝对必须的工具为Web开发人员。

来源

2012-02-03 17:38:59 Tom

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

来源

2012-02-03 17:42:40 Tibor

高亮html元素

回答

相关问题