This is one of the very useful features of the IE developer
toolbar which many developers will love. With this feature a developer can add
or remove attributes to an HTML element that is rendered in IE without changing
the actual HTML of the page in the server with a preview.
How to do this?
Select the element you need to change or add some attributes
like we did in the last section. Click the green “+” button on the Attribute
pane of the IE toolbar and select a new style or attribute from dropdown to
specify a value. Refer the Figure 6 for selecting new property.
Figure 6 - New Property
Consider, if we want to increase the width of an image and
have a preview. To do this, select the image element and reach the toolbar
window then select the width property, enter a new value, and press enter to
have a preview. Refer to Figure 7 where I have added width as 200px for the
article image button with a preview. If the value entered matches our
requirement then we can replicate the same in the HTML page on the server. Thus
we can reduce the time taken for adjusting the element every time on the server
and have a preview until we get the correct HTML output.
Figure 7 - Applying New Property
Note
Checking “Show Read-Only Properties”
will show all the read only properties of the element which we can’t adjust to
a new value. In the same way “Show Default Style Values”
will show the default style value for the HTML element.
Also, we can use the “Find Element”
option in the “Find” menu to select the elements
rendered in the page. Using this menu we can find the HTML markups based on
Element, Class, ID and Name of the element.