In this article, I will be showing you how to add or remove HTML attributes. HTML attributes like title, href, src, etc. For example:-

<img src="abc.jpg" class="test" alt="abc" />

Here: src, class, alt, title are attributes.

You can add attributes like above through jQuery. You can also remove the attributes with jQuery.

VIEW DEMO

Here is the HTML source. This contains a link with id ‘myLink’ and Add and Remove buttons with id ‘add’ and ‘remove’ respectively.

<div class="content">
<a id="myLink" href="#">This is my LINK</a>
</div>
 
<button>Add</button>
<button>Remove</button>

Adding Attribute

The following function works as follows:
- myLink is the id of a href link
- add is the id of add button
- when add button is clicked, some style (css) is added to the link with id ‘myLink’
- after that, ‘title’ attribute is added to link with id ‘myLink’

$("#add").click(function(){
	$("#myLink").css({"font-weight":"bold", "color":"red", "text-decoration":"line-through"});
	$("#myLink").attr("title","My Link Title");
});

Removing Attribute

The following function works as follows:
- there is a button with id ‘remove’
- when remove button is clicked, the following things happen:
- ‘style’ attribute is removed from the link with id ‘myLink’
- ‘title’ attribute is removed from the link with id ‘myLink’

$("#remove").click(function(){
	$("#myLink").removeAttr("style");
	$("#myLink").removeAttr("title");
});

VIEW DEMO

Cheers,

While discussing about Web Standards, most web developer’s cliche is “Who Cares Standards?”, “Too Difficult to understand, let’s forget” and “It worked anyway”.

Always be listed on side to follow web standards. It’s easy to build a website with good looking graphics and best functionality but why they just don’t add up a little effort to make a site follow standards. We must remember that, we are targeting visitors of site, and pages should be accessible irrespective of OS, Browser used by visitor. Using web standards offer much benefit to us.

• Separation of HTML semantics (structure) from design confirms better accessibility.
• Pages sizes are less and results in quick downloads. Browsers render pages faster when pages confirm standards.
• Following standard ensures that documents will be compatible in future browsers. There is no risk of browser not understanding your documents. Interpretation and rendering is easy for browser.
• Different CSS files can be created and adopted accordingly. Adaptation of document to print media, mobile devices is easy just by creating alternative style sheets and linking to particular CSS file.

The bottom line is: use web standards. It’s the future of web. If you are new and haven’t yet followed then start from this point upwards. And, after all this; its you to choose and follow and how you perceives.