How to know values of all attributes and properties of a tag element in HTML


Tags: javascript,html,css,debugging,firebug

Problem :

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.



Solution :

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: screenshot of chrome inspector

  • 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!


    CSS Howto..

    How to get rid of spaces with CSS

    How do I reference a javascript variable from a razor section?

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    how to center css class images with text?

    how to adjust width of first cell of a table using CSS

    How to override inline css from external class?

    How to compile scss to css with node-sass

    How to edit css margin-top for a text in mobile version

    How to add different CSS3 hover transitions on hover out with CSS

    CSS, how to put a div inside a div that is responsive?

    How do I install and use Groundwork CSS

    How can I style jQuery-UI autocomplete differently than jQuery-UI tabs?

    How to do taxonomy based css styling using drupal template.php?

    How to adjust width of right-aligned navbar

    How to center text in lists?

    How to find resources(CSS , JS Etc) that are blocking in Chrome

    How can I use True Type Collection (.ttc) in JavaFX?

    Javascript/CSS, How to keep changes?

    How do I add transition to the effect of hide() and show() on these elements?

    How do I prevent my dropdown from closing when clicking inside it?

    How do I fix an HTML panel to the page after it hits the top of the viewport?

    how to properly use css in jsf?

    How to position text on image using position as absolute while container width being in percent

    Image title both alingn. How to make each element aligned vertically?

    How to scroll beyond fixed position elements on a page with TOC without using JS?

    how to hidden image over image in css

    How to correctly override default JavaFX 8 CSS on TableView

    Why does an absolutely positioned child expand container height and how to prevent this?

    How to attribute different ids to child elements depending on the number of parent-like elements in that container

    css: how to target p a img