Изменение имени класса CSS с использованием JavaScript

Question

можно изменить имя класса класса css. например, если у меня есть класс А и класс Б, я хочу изменить имя класса класса А на класс В. Целью этого является, чтобы наследовать все характеристики от CLASSA и 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> 

Answer 1

Да, вы можете, но у вас есть какая-то ошибка в коде скрипки, и в ваших рассуждениях.

Прежде всего, вам нужно загрузить jQuery, если вы используете функции jQuery. Во-вторых, из-за опечатки элемент не был найден.

Но тогда логика. classB добавьте преобразование к свойствам classA, но если вы измените класс на classB, элемент больше не имеет свойств classA, поэтому преобразовать нечего.

Короче говоря, вы не должны заменить класс, но добавьте класс. Элемент может иметь несколько классов, поэтому, когда вы даете ему как classA и classB, он будет правильно показать преобразованную форму:

$(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'); 

}); 

Обновлено скрипка: http://jsfiddle.net/y8h4qn3L/9/

Answer 2

Вы можете просто использовать оба classes` имена :

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

Или в CSS, наследоваться от одного класса к другому:

.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>