替换元素中的类名，但不删除此元素中的其他类纯javascript

Replace Class Name in elements but not remove other class in this elements pure javascript

本文关键字：元素 其他 javascript 删除 替换      更新时间：2023-09-26

我想替换整个文档中的字体类
如何在没有jQuery的情况下使用纯JavaScript来解决这个问题？请提出建议
我不想在javascript中的更改类元素中删除其他类。怎么办
这是我的项目

Html

        <span class="switch-unicode">
            <a onclick="changeFont(2)" href="javascript:">
                <i class="icon icon-check"></i>
                <span>Unicode</span>
            </a>
        </span>
        <span class="switch-zawgyi">
            <a onclick="changeFont(1)" href="javascript:">
                <i class="icon icon-check-empty"></i>
                <span>Zawgyi</span>
            </a>
        </span>
        <div class="clearfix">
           <span class="unicode ieUnicode pull-right">Unicode</span>
           <span class="unicode ieUnicode pull-left">Unicode</span>
        </div>

Css

        .unicode{
            border: 2px solid blue;
        }
        .zawgyi {
            border: 2px solid red;
        }
        .pull-right {
            float: right;
        }
        .pull-left {
            float: left;
        }
        .clearfix {
            clear: both;
        }

Javascript

function changeFont(num) {
   var fromFont = 'unicode ieUnicode';
   var toFont = 'zawgyi';
   if ( num==2 ) {
      fromFont = 'zawgyi';
      toFont = 'unicode ieUnicode';
    };
   /* Change classes */
    var elems = document.getElementsByClassName( fromFont );
        var i = elems.length;
        while(i--) {
           var item = elems[i]; 
           item.className = toFont;
         };
         return false;
};

item.className = toFont;

你正在重新分配整个班级。

连接！

item.className += toFont;
               ^

或者使用classList对象。

item.classList.add(toFont);

如果我理解正确，你只想用另一个类更改一个类，你可以这样做：

x = document.getElementsByClassName('unicode').item();
 x.attributes.class //say logs out "unicode class1 class2";
 x.attributes.class = "class3 class1 class2"; //replaced unicode by class3

希望能有所帮助。

我添加了"hasClass"来检查特定元素是否属于类。我还添加了"addClass"answers"removeClass"方法，以便在指定的元素类列表中添加和删除类。以下是实现：

var link1 = document.getElementById("changeFont1");
var link2 = document.getElementById("changeFont2");
link1.onclick = function() {
    changeFont(2);
};
link2.onclick = function() {
    changeFont(1);
};
function changeFont(num) {
   var fromFont = 'unicode ieUnicode';
   var toFont = 'zawgyi';
   if ( num==2 ) {
      fromFont = 'zawgyi';
      toFont = 'unicode ieUnicode';
    };
   /* Change classes */
    var elems = document.getElementsByClassName( fromFont );
        var i = elems.length;
        while(i--) {
           var item = elems[i]; 
            if (hasClass(item, fromFont)) {
                removeClass(item, fromFont);
                addClass(item, toFont);
            }
         };
         return false;
};
function hasClass(ele,cls) {
  return ele.className.match(new RegExp('(''s|^)'+cls+'(''s|$)'));
}
function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(''s|^)'+cls+'(''s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}
.unicode{
            border: 2px solid blue;
        }
        .zawgyi {
            border: 2px solid red;
        }
        .pull-right {
            float: right;
        }
        .pull-left {
            float: left;
        }
        .clearfix {
            clear: both;
        }
<span class="switch-unicode">
            <a id="changeFont1" href="javascript:">
                <i class="icon icon-check"></i>
                <span>Unicode</span>
            </a>
        </span>
        <span class="switch-zawgyi">
            <a id="changeFont2" href="javascript:">
                <i class="icon icon-check-empty"></i>
                <span>Zawgyi</span>
            </a>
        </span>
        <div class="clearfix">
           <span class="unicode ieUnicode pull-right">Unicode</span>
           <span class="unicode ieUnicode pull-left">Unicode</span>
        </div>

相关文章：