Many codes including me was looking for it. This type of code is also availeable on google widley but they arenot like this. This one have some extra features. Its sound to be simple but its not only in working and very simple in coding. The main work of this code is first to pick the desired classes from all the webpage through CSS CLASS not CSS ID that many do, The next step is to convert all of these classes with one click to other classes. So via this you can change full style of a div using its class.
It actually run a loop by finding the same class from a webpage that is not required if we pick the DIVs from there ID but sometime we only have CLASS. One more thing is that you can also switch between two classes or a div using the same code and also some more taht you can get via contacting us. So now check out the live DEMO and see the features of the code and get it from below. Its quite easy to understand and use it.
Table of Contents
Features:
1.) Pure JavaScript Code.
2.) Simple And Easy To Understand.
3.) Best For Multi-Purpose.
4.) Change Multiple DIV Of Same Classes On One Page.
5.) Fully Customizable.
6.) No JQuery Added.
7.) Will Pick Your DIVs From Classes Not IDs.
8.) Switchable Code Design.(Contact For It)
9.) Short CSS Added.
10.) You Can Change Multiple Different Classes Too.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Click “Save“, Now You Are Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <body Code.
7.) Now Copy The Below Code And Paste It After <body Code.
8.) Click “Save Template” And Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Create A “New Post” Or “Edit” Some One Existing.
4.) Click “Edit HTML” Tab In The Post Editor.
5.) Now Copy The Below Code And Paste It There.
8.) Click “Publish” Or “Update” To Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) Save It, Now You Are Done.
<style type='text/css'>
.normal_class{background-color:#ff0000;width:100%;height:100px;}
.changed_class{background-color:#0000ff;width:100%;height:100px;}
</style>
<script type='text/javascript'>
function blue(){
if(document.getElementsByClassName("normal_class")) {elementArray = document.getElementsByClassName("normal_class"); while (elementArray.length) {elementArray[0].className = "changed_class";}}
}
</script>
<div id="main_DIV">
<div class="normal_class">+++Your DIV Data+++</div>
<div class="normal_class">+++Your DIV Data+++</div>
<div class="normal_class">+++Your DIV Data+++</div>
</div>
<a onclick='blue()'>Blue</a>
Customization:
1.) normal_class Is You Main Default Class Of The DIV.
2.) changed_class Will Be Your Class Of The DIV After Click.
3.) So Change These And Save It.
first of all, it will not going to work with element has multiple classes like span class=”normal_class extra_class another_extra_class” (which are very common to see)
Solution: elems[0].className = (‘ ‘ + elems[0].className + ‘ ‘).split(‘ normal_class ‘).join(‘ changed_class ‘).replace(/^s|s$/g,”)
secondly and more trivial, document.getElementsByClassName doesn’t work in every browser (namely IE6,7).
1.) Its The Basic Code To Change The Class Picking From Class. It Can Be Further Customize For Pro Uses As You Mentioned.
2.) You Can Pick ID To Work It Into IE But This Is Picking From Class, I Will Share ID Code Later But I Was To Share That You Can Also Do It From Class Except Fucking IE.
There are many other process to change classes/ids as per required by user. Sometime you don’t have ID where you want to change class. Can you make the code that will pick the div from class and change its class as it only have one class but work in IE as you want?