How to add a class to any element using jQuery or JavaScript

Published


If you are a good web designer, you will always think of how to automate things without wasting our valuable time.
This is one of the question every web designer/web developer thinks of. how to automate things!

Here we will discuss about how to add classes to elements automatically on page load.
lets have a look at what are the benefits of assigning classes automatically.

  • Spend no time to add all classes by hand
  • Accuracy
  • Faster Page loads

jQuery's Basic syntax to add class is 
$("elementID").addClass("ClassName")
To use jQuery,you will have to add jQuery library between your<head></head> tags.
If you have not yet included jQuery in your webpages, its the time to do that. dont be afraid that the size of jQuery Script will affect your pageloading time,because it is less than 100 kb if minimized.(Smaller than a normal image i would say). 
To Call jQuery, find </head> tag in your code.then Copy and paste the below code just before that </head> tag.
<script src='//code.jquery.com/jquery-1.8.0.min.js' type='text/javascript'></script>

How to add a class to all "img" tags at a time using jQuery or JavaScript

Imagine that you have  many images in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-img-tags" to all <img>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "img" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("img").addClass("my-sample-class-for-all-img-tags");
});
</script>

JavaScript Code for adding a class to all "img" tag in document :

<script type='text/JavaScript'>
var images = document.getElementsByTagName("img");
var i;
for(i = 0; i < images.length; i++) {
    images[i].className += " my-sample-class-for-all-img-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-img-tags" will be added to all img tags inside the webpage.

How to add a class to all pre tags at a time using jQuery or JavaScript

Imagine that you have  many pre tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-pre-tags" to all <pre>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "pre" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("pre").addClass("my-sample-class-for-all-pre-tags");
});
</script>

JavaScript Code for adding a class to all "pre" tag in document :

<script type='text/JavaScript'>
var pres = document.getElementsByTagName("pre");
var i;
for(i = 0; i < pres.length; i++) {
    pres[i].className += " my-sample-class-for-all-pre-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-pre-tags" will be added to all pre tags inside the webpage.


How to add a class to all code tags at a time using jQuery or JavaScript

Imagine that you have  many <code> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-code-tags" to all <code>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "code" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("code").addClass("my-sample-class-for-all-code-tags");
});
</script>

JavaScript Code for adding a class to all "img" tag in document :

<script type='text/JavaScript'>
var codes = document.getElementsByTagName("code");
var i;
for(i = 0; i < codes.length; i++) {
    codes[i].className += " my-sample-class-for-all-code-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-code-tags" will be added to all <code> tags inside the webpage.


How to add a class to all div tags at a time using jQuery or JavaScript

If you want to automate the process of adding a class called "my-sample-class-for-all-div-tags" to all <div>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "img" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("div").addClass("my-sample-class-for-all-div-tags");
});
</script>

JavaScript Code for adding a class to all "div" tag in document :

<script type='text/JavaScript'>
var divs = document.getElementsByTagName("div");
var i;
for(i = 0; i < divs.length; i++) {
    divs[i].className += " my-sample-class-for-all-div-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-div-tags" will be added to all div tags inside the webpage.

How to add a class to all button tags at a time using jQuery or JavaScript

Imagine that you have  <button> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-button-tags" to all <button>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "img" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("button").addClass("my-sample-class-for-all-button-tags");
});
</script>

JavaScript Code for adding a class to all "img" tag in document :

<script type='text/JavaScript'>
var buttons = document.getElementsByTagName("button");
var i;
for(i = 0; i < buttons.length; i++) {
    buttons[i].className += " my-sample-class-for-all-button-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-button-tags" will be added to all <button> tags inside the webpage.

How to add a class to all input tags at a time using jQuery or JavaScript

Imagine that you have  <input> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-input-tags" to all <input>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "input" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("input").addClass("my-sample-class-for-all-input-tags");
});
</script>

JavaScript Code for adding a class to all "input" tag in document :

<script type='text/JavaScript'>
var inputs = document.getElementsByTagName("input");
var i;
for(i = 0; i < inputs.length; i++) {
    inputs[i].className += " my-sample-class-for-all-input-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-input-tags" will be added to all <input> tags inside the webpage.

How to add a class to all textarea tags at a time using jQuery or JavaScript

Imagine that you have  <textarea> tags in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-textarea-tags" to all <textarea>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "textarea" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("textarea").addClass("my-sample-class-for-all-textarea-tags");
});
</script>

JavaScript Code for adding a class to all "textarea" tag in document :

<script type='text/JavaScript'>
var textareas = document.getElementsByTagName("textarea");
var i;
for(i = 0; i < textareas.length; i++) {
    textareas[i].className += " my-sample-class-for-all-textarea-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-textarea-tags" will be added to all <textarea> tags inside the webpage.

How to add a class to all span tags at a time using jQuery or JavaScript

Imagine that you have  <span> tags used in your website or blog.
and you want to automate the process of adding a class called "my-sample-class-for-all-span-tags" to all <span>  tags inside the document.

Add below code just before closing body tag (</body>).

jQuery Script for adding a class to all "span" tag in document:

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("span").addClass("my-sample-class-for-all-span-tags");
});
</script>

JavaScript Code for adding a class to all "span" tag in document :

<script type='text/JavaScript'>
var spans = document.getElementsByTagName("span");
var i;
for(i = 0; i < spans.length; i++) {
    spans[i].className += " my-sample-class-for-all-span-tags";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-span-tags" will be added to all Span tags inside the webpage.

How to add a class to html tag on page load using jQuery or JavaScript

If you want to add a class to your <html> tag on pageload,Add below code just before closing body tag (</body>).

jQuery Script for adding a class to "html" tag

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("html").addClass("my-sample-class-for-html-tag");
});
</script>

JavaScript Code for adding a class to "html" tag

<script type='text/JavaScript'>
var htmltag = document.getElementsByTagName("html");
htmltag[0].className += " my-sample-class-for-html-tag";
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-html-tag" will be added to <html> tag.

How to add a class to body tag on page load using jQuery or JavaScript

If you want to add a class to your <body> tag on pageload,Add below code just before closing body tag (</body>).

jQuery Script for adding a class to "body" tag

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$("body").addClass("my-sample-class-for-body-tag");
});
</script>

JavaScript Code for adding a class to "body" tag 

<script type='text/JavaScript'>
var bodytag = document.getElementsByTagName("body");
bodytag[0].className += " my-sample-class-for-body-tag";
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-body-tag" will be added to <body> tag.

How to add a class to an element with specific class on page load using jQuery or JavaScript

If you want to add a class to an element with specific class on pageload,Add below code just before closing body tag (</body>).

jQuery Script for adding a class to an element with specifc class.

<script type='text/JavaScript'>
jQuery('document').ready(function(){
$(".existing-class-name").addClass("my-sample-class-for-element-with-a-class-of-existing-class-name");
});
</script>

JavaScript Code for adding a class to an element with specifc class.

<script type='text/JavaScript'>
var classes = document.getElementsByClassName("existing-class-name-to-find");
var i;
for(i = 0; i < classes.length; i++) {
    classes[i].className += " my-sample-class-for-all-elements-with-class-of-existing-class-name-to-find";
}
</script>

Save,and you are done.
Next time when you refresh the output page, a class named "my-sample-class-for-all-elements-with-class-of-existing-class-name-to-find" will be added to all elements which was having a "existing-class-name-to-find" class.


Important Notes:

  • Dont forget to include jQuery library before you experiment with jquery sample codes above,a small description on how to add jQuery to your page is explained in the beginning of this article.
  • Dont forget to replace class names and tags with your own classnames which you used in your blog or website.

Press ctrl+D to bookmark and Please leave your comments and thoughts below :)


Comments

Post a Comment

Subscribe to: Post Comments ( Atom )