高亮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

回答

相關問題