如何知道HTML中標記元素的所有屬性和屬性的值

Question

我想查看HTML中任何標簽的屬性的所有值。 即使在標記中設置了它們，也沒有在HTML中設置它們。 例如：

<div style="background-color:#000000;">
<p>abc</p>
</div>

我想知道如何找到<p>的背景色。 原因是因為可以通過多種方法在標簽中設置屬性的值。 例如：該值可以在外部CSS文件，JavaScript文件中設置，可以由父標記設置，可以在同一頁面的CSS中設置等。但是，始終很難通過閱讀來跟蹤設置值（例如字體大小）完整的代碼，然后打開HTML代碼中引用的所有文件。 我想知道包含在<p>中的文本的字體值，但是很難在整個頁面及其關聯的.js和.css文件中進行搜索，以查找<p>標記從何處選擇其內容。字體值。 因此，我想知道，如果我在瀏覽器中選擇了文本，那么有沒有辦法顯示所選文本的所有屬性及其值。 就像Visual Studio，Netbeans，Eclipse IDE等一樣，它在設計界面中顯示任何拖放對象的所有屬性。

Answer 1

那正是Firebug的目的。 我更喜歡使用Chrome Inspector，但是它非常相似。

• 右鍵單擊您要“調查”的任何元素
• 從上下文菜單中選擇“檢查元素”

這樣的事情彈出：

• 在右下角，您可以看到應用於此元素的所有樣式。
  • element.style是“內聯”樣式，直接應用於元素的style屬性中
  • 所有其他選擇器都來自您的樣式表。 選擇器旁邊是文件名和選擇器所在的行號（在屏幕截圖中是縮小的樣式表，因此行號沒有太大意義）
  • 將鼠標懸停在每個樣式聲明上時，您可以在其旁邊看到一個復選框。 取消選中此選項將禁用樣式。 非常適合調試。
  • 您甚至可以通過編輯或添加規則直接更改樣式。 當然，您以后必須將它們保存到css文件中，但這對於開發和測試非常有用。

您應該真正學會與檢查員一起工作，這是一個非常強大的工具，可以使開發變得如此容易！

Answer 2

var col = document.getElementById(your_div_id).style.backgroundColor;

您基本上可以使用您能想到的每個屬性來執行此操作。 如果不是style屬性，則只需刪除.style 。

如果屬性名稱中有破折號，則破折號后的字母通常只是大寫，並且刪除了破折號。

Answer 3

您將需要進行搜索，獲取元素，然后獲取層次結構中的所有父元素並檢查其值。

如果您只是在瀏覽頁面而又不想真正地以編程方式進行操作，則可以使用瀏覽器F12控制台查看從何處獲取其屬性。

例如，chromes控制台窗口在您選擇html標簽時將顯示css屬性以及它們來自右側的位置。