How can I change the class of HTML elements with Javascript?

Question

I have created a cms theme, it has some customization features which I want to show on live demo. Basically I want to add Javascript style switchers or modifier. I want users to select some value from checkbox or select tags and the selected value should reflect on html element. for example,

my page container is

<div id="container"> <!--PAGE GOES HERE --> </div>

if users click on 'color scheme blue' on selecting this, I want my container to have the class 'blue_theme' added

<div id="container" class="blue_theme" > <!--PAGE GOES HERE --> </div>

Also, is it possible to directly change css property like this

/* Base property */
#container{
background:red;
}

if users click on 'color scheme blue' on selecting this, I want to make my container to be

/* Base property */
#container{
background:blue;
}

• Ahsan Khurshid: See my answer below with a demo, hope it will help you a lot.

Answer 1

You can do it with CSS also. Write like this:

HTML

<input type="radio" name="color" class="red"/> Red
<input type="radio" name="color" class="blue" /> Blue
<div id="container" for>
 choose theme:
</div>

CSS

#container {
 width: 100%;
 height: 500px;
 overflow: auto;
}
.red:checked ~ #container { background: red}
.blue:checked ~ #container { background: blue }

Check this http://jsfiddle.net/wd6Cr/1/

Answer 2

Try this:

$(".button").click(function(){
 $("#container").attr('class','custom_class_added');
})

You could use addClass() and removeClass() as well, depending on your function

• Mohd Sakib: Thanks. I am a jquery newbie. Can you please elaborate more how to implement this on my index.html?
• Ahmad Alfy: You should wrap this code within HTML script tags and then wrap it on jQuery on dom ready like this : $(document).ready(function() { /*You Code goes here*/ }); to make sure that every element on the page is ready before applying the jQuery. Check out this : api.jquery.com/ready

Answer 3

Set a class instead of changing the ID of the <div>. Especially since space is not allowed in a ID name.

HTML (on change state)

<div id="container" class="custom_class_added">

CSS

#container.custom_class_added{
 background: blue;
}

Answer 4

For adding classes, addClass():

$('#container').addClass('custom_class_added');

For changing css, css():

$('#container').css('color', 'blue');

• Mohd Sakib: Thanks. I am a jquery newbie. Can you please elaborate more how to implement this on my index.html?
• davids: Indeed! But you should provide more code, we don't know how your checkboxes or select tags look like

Answer 5

If you wanted to add a style to it with jQuery, you could do something along the lines of:

$('#container').css({
 "background-color" : "blue",
 "color" : "red"
});

Or, you can add a class to it when the user clicks a button:

<label for="blue_theme">Blue</label>
<input type="checkbox" id="blue_theme"/>
<div id="container"></div>​
$("#blue_theme").click(function() {
 $("#container").attr('class', 'blue_theme');
})​

ex.) http://jsfiddle.net/charlescarver/jp8UL/

Also, you should note that you might want to set a cookie if you want the style to stick on page load. I'd take a look at jQuery Cookie on GitHub.

Answer 6

Use classes instead of ID's and your function and HTML could look like this:

HTML:

<ul id="changer">
 <li class="blue">Blue color</li>
 <li class="red">Red color</li>
</ul>
<div id="container"></div>

jQuery

var $container = $('#container');
$('#changer').on('click', 'li', function(){
 var $this = $(this),
 $color = $this.attr('class');
 $container.removeClass().addClass($color);
});

Answer 7

use $('#container).css({'background-color' : 'blue'}); in your onchange events. that should work for the css style part.
as for the part where you want to add a class to your tag, use $('#container).attr('class', 'custom_class_added');, which will add the class attribute to your tag.

Using this code for form elements like selectboxes would go as followed:

<select id="mySelectBox">
 <option value="blue">Blue</option>
 <option value="green">Green</option>
</select>
<script type="text/javascript">
 $(document).ready(function(){
 $("#mySelectBox").change(function(){
 $("#theElementYouWant").css({"background-color" : $("#mySelectBox").val()});
 });
 });
</script>

To use the $('#container).attr('class', 'custom_class_added'); code, you could place it anywhere between your <script></script> tags.

• Mohd Sakib: Thanks. I am a jquery newbie. Can you please elaborate more how to implement this on my index.html?

Answer 8

Are you trying something like this:

Solution 1:

HTML:

<div id="container">
 choose theme:
 <input type="radio" name="radio-theme" data-color="red" /> Red
 <input type="radio" name="radio-theme" data-color="blue" /> Blue
</div>​

jQuery

$("#container").find("input[type=radio]").on("change", function(){
 var dataTheme = $(this).data("color");
 $("#container").removeAttr("class");
 $("#container").addClass(dataTheme); 
});​

DEMO 1

Solution 2:

HTML:

<div id="container">
 choose theme:
 <input type="checkbox" name="radio-theme" data-color="red" /> Red
 <input type="checkbox" name="radio-theme" data-color="blue" /> Blue
</div>​

jQuery:

$("#container").find("input[type=checkbox]").on("change", function(){ 
 var dataTheme = $(this).data("color"); 
 if( $(this).is(":checked") ) { 
 $("#container").removeAttr("class");
 $("#container").addClass(dataTheme); 
 } else {
 $("#container").removeAttr("class"); 
 } 
});​

DEMO 2

Answer 9

Something like this : http://jsbin.com/EKEYOfEl/4/

HTML :

<select class="themeSwitch">
 <option value="red">Red</option>
 <option value="blue">Blue</option>
</select> 
<div id="container"> <!--PAGE GOES HERE --> </div>

CSS :

#container{
 background:red;
 height:100px;
 width:100%;
}
.custom_class_added{
 background:blue !important;
}

JS :

$(document).on("change", ".themeSwitch", function(){
 var theme = $(this).val();
 if(theme=="red"){ 
 $("#container").removeClass("custom_class_added");
 }else if(theme=="blue"){
 $("#container").addClass("custom_class_added");
 }
});

Now by changing the value of select box, you can simply change the background color by toggling with css class.

Answer 10

You can do it using this pure JavaScript

colorOption.onchange = function() {
 var colorValue = option[colorOption.selectedIndex].value;
 template.style.background = colorValue;
 template.innerHTML = template.innerHTML;
};

You can use this jsfiddle

Answer 11

Use this:

$('#bluebttn').click(function(){
 $('#container').removeClass().addClass('blue_theme') ;
});

Assuming

ID of you blue button is #bluebttn

Name of your blue css class is blue_theme

Repeat for other colors.

Answer 12

you can try this if you dont want to add or remove class and just want to change the color.

 $('#yourbutton').click(function(){
 $('#container').css('background-color', 'blue');
 });

• RevanProdigalKnight: This doesn't really answer what the OP was asking, though it does work.