CSS class name change using JavaScript

Question

is it possible to change the class name of css class. for example if i have classA and classB i want to change the class name of classA to classB. the purpose of this is to inherit all the characteristics from classA and classB

http://jsfiddle.net/y8h4qn3L/2/

        .classA{
            position:absolute;
            width:25px;
            height: 25px;
            border-radius: 10px;
            background: #f57df5;
        }
        .classB{

            -webkit-transform : rotate(30deg) translatex(120px);
            background-color:black;
        }

  <div class="classA"></div>

possible duplicate of [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — leigero, Mar 01 '15 at 20:57
is [this](http://jsfiddle.net/y8h4qn3L/5/) what you are looking to achieve? — JAM, Mar 01 '15 at 20:58

score 2 · Accepted Answer · answered Mar 01 '15 at 21:02

Yes you can, but you have some errors in your fiddle code, and in your reasoning.

First of all, you need to load jQuery if you use jQuery features. Secondly, due to a typo the element was not found.

But then the logic. classB add a transformation to the properties of classA, but if you change the class to classB, the element no longer has the properties of classA, so there is nothing to transform.

Long story short, you should not replace the class, but add the class. An element can have multiple classes, so when you give it both classA and classB, it will correctly show the transformed shape:

$(document).ready(function(){
    var x = document.getElementsByClassName('classA');

    // jQuery style
    $(x[0]).addClass('classB');

    // Old Javascript style
    x[0].className += ' classB';  

    // Modern Javascript style, not supported in IE9-
    x[0].classList.add('classB');   

});

Updated fiddle: http://jsfiddle.net/y8h4qn3L/9/

score 0 · Answer 2 · answered Mar 01 '15 at 21:04

You can just simply use both classes` names:

<div class="classA classB"></div>

Or in CSS, inherit from one class to another:

    .classA,
    .classB
    {
        position:absolute;
        width:25px;
        height: 25px;
        border-radius: 10px;
        background: #f57df5;
    }
    .classB
    {

        -webkit-transform : rotate(30deg) translatex(120px);
        background-color:black;
    }

   <div class="classB"></div>

CSS class name change using JavaScript

2 Answers2