Question

是否可以更改css类的类名。例如，如果我有classA和classB，我想将classA的类名更改为classB。这样做的目的是继承classA和classB

的所有特性

        .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

你可以简单地使用两个类名：

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

使用JavaScript更改CSS类名称

2 个答案: