How to know values of all attributes and properties of a tag element in HTML
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> 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.
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!