如何知道HTML中标记元素的所有属性和属性的值

Question

I want to see all values of attributes of any tag in HTML. Even if they are set in the tag or not in HTML. For example:

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

I want to know how I can find the background color of <p> . The reason is because there can be many ways to set a value of an attribute in a tag. For example: the value can be set in an external css file, javascript file, could be set by a parent tag, could be set in css in same page etc. But is always difficult to track to set value such as font size by reading whole code and opening its all files referenced in HTML code. I wanted to know value of font of a text enclosed in a <p> but it is very difficult to search on whole page and its associated .js and .css file to search to find out from where the <p> tag is picking its font values. So, I wanted to know that if I select the text in a browser then is there any way possible to show all the attributes and its values of selected text. Just like Visual Studio, Netbeans, Eclipse IDE etc. show all properties of any drag-and-drop object in the design interface.

Answer 1

That is exactly what Firebug is for. I prefer to work with Chrome Inspector, but it is very similar.

• right click on any element you want to 'investigate'
• choose 'inspect element' from the context menu

Something like this pops up:

• In the bottom right corner you can see all the styles that are applied to this element.
  • element.style are the 'inline' styles, that are applied directly in the style attribute of the element
  • all the other selectors are comming from your stylesheets. Right next to the selector are the name of the file and the line number this selector is on (in the screenshot it is a minified stylesheet, so the line number does not make much sense)
  • when hovering over each style declaration, you can see a checkbox next to it. Unchecking this wil disable the style. Great for debugging.
  • you can even change the styling directly, by editing or adding rules. You would have to save these to you css file afterwards of course, but it is great for developing and testing.

You should really learn to work with the inspector, it is a very powerful tool that can make developing so much easier!

Answer 2

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

You can basically do this with every attribute you can think of. If it's not a style attribute, just remove .style .

If there is a dash in the attribute name, the letter after the dash is often just capitalized, and the dash is removed.

Answer 3

you would have to do a search, get the element then all its parents in the hierarchy and check their values.

If you are just looking at a page and wanting to know and not really needing to do this programmatically you can use a browsers F12 console to see where it gets its properties from

For instance chromes console window when you select a html tag will show the css attributes and where they come from on the right side.