Question

我想替换整个文档中的字体类如何在没有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;
};

Answer 1

item.className = toFont;

您重新分配整个班级。

级联！

item.className += toFont;
               ^

或使用classList对象。

item.classList.add(toFont);

Answer 2

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

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

希望它有所帮助。

Answer 3

我添加了'hasClass'来检查特定元素是否属于某个类。我还添加了'addClass'和'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>

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

3 个答案: