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

我想查看HTML中任何標籤屬性的所有值。即使它們被設置在標籤中或不在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等一樣，在設計界面中顯示任何拖放對象的所有屬性。

來源

2013-06-02 Computer User

可能重複[如何獲取所有CSS的元素]（http://stackoverflow.com/questions/15000163/how-to-get-all-css-of-element） –

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

右鍵單擊要 '調查'
然後從上下文菜單中選擇 '檢查元素'

像這樣的任何元素上彈出： screenshot of chrome inspector

在右下角可以看到應用於此元素的所有樣式。
- element.style是「內聯」方式，即直接在單元
- 所有其他的選擇是從你正在添加的樣式表的樣式屬性應用。在選擇器旁邊是文件名和這個選擇器的行號（在截圖中它是一個縮小的樣式表，所以行號沒有多大意義）
- 當你將鼠標懸停在每個樣式聲明上時，可以看到旁邊的複選框。取消選中此選項將禁用樣式。非常適合調試。
- 您甚至可以通過編輯或添加規則直接更改樣式。之後你將不得不將這些文件保存到你的css文件中，但它對開發和測試非常有用。

你真的應該學會與督察工作，這是一個非常強大的工具，可以讓開發變得更輕鬆！

來源

2013-06-02 13:55:27 Pevara

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

你基本上可以用你能想到的每個屬性來做到這一點。如果它不是風格屬性，只需刪除.style。

如果屬性名稱中有短劃線，短劃線後面的字母通常只是大寫，並且短劃線被刪除。

來源

2013-06-02 13:36:36 Anickyan

不會爲他想要的東西工作。如果背景顏色在父元素上，則該代碼不會返回他想要的信息。 –

這將只獲取直接在元素上設置的樣式（通過JS或標記）。 –

你將不得不做一個搜索，獲取該元素，然後獲取它的所有父母在層次結構中，並檢查它們的值。

如果你只是在尋找一個頁面，並想知道，而不是真正需要做這個程序，你可以使用瀏覽器F12控制檯，看看它從

得到它的特質，比如鉻合金控制檯窗口，當你選擇一個html標籤將顯示css屬性和它們來自右側的位置。

來源

2013-06-02 13:40:48

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

回答

相關問題