In the last section, we understood how to see the properties
and styles by selecting elements from the HTML DOM structure’s treeview. If the
page is very lengthy then selecting an element from DOM treeview will be very
complicated to see its details. It will be very easy if we select the actual
element from the IE window and in turn get the properties and styles populated
in the right pane of the toolbar window.
This can be done by selecting Find > Select
Element by Click option from the IE developer toolbar window. Refer
below to Figure 4 for better understanding.
Figure 4 - Selecting an Element
For example, if we want to make out the properties and
style attributes of an IMG element which is on the middle of the page then we
need to select the above option and click the required element from the IE
window. This will populate the styles and properties of the element on the
toolbar window similar to the figure below.
Figure 5 - Toolbar property Population
In figure 5, I have selected the article image button which
in turn populated the attributes and styles of the image button shown in the
toolbar window. Also, the treeview will automatically reflect the selection in
the HTML DOM structure.