替换字体类

-2

我想在整个文档中替换字体类。
当first-font-btn班级点击时，我想在本文档中将班级Second-font更改为first-font。
当second-font-btn班级点击时，我想在本文档中将类first-font更改为second-font。
我有changeFont()方法。如何使用没有jQuery的纯JavaScript来解决这个问题？请推荐！

HTML替换字体类

<div class="languagefont"> 
    <span class="first-font-btn"> 
      <a onclick="changeFont(2)" href="javascript:"> 
       <span class="Second-font">1</span> 
      </a> 
    </span> 
    <span class="second-font-btn"> 
     <a onclick="changeFont(1)" href="javascript:"> 
      <span class="Second-font">2</span> 
     </a> 
    </span> 
</div>

的Javascript

<script type="text/javascript"> 
    var currentFont = 1; 

    function changeFont(value) { 
     if (value != currentFont) _switch_font(value); 
     currentFont = value; 
    } 
</script>

来源

2014-11-02 user3675191

请编辑您的代码以包含您的'_switch_font（）'方法，以便我们可以看到什么不起作用。 – 2014-11-02 20:58:18

你可以在这个插件中看到_switch_font（）方法。 https://wordpress.org/plugins/unicode-zawgyi-combobox/ – user3675191 2014-11-02 21:03:03

我使用这个插件来改变font.Now，我只想改变类名。 – user3675191 2014-11-02 21:07:08

这里是工作的代码，假设这些元素的其他类，不只是first-font和second-font：

<!doctype html> 
<html> 
    <head> 
     <title>Swap Classes</title> 
     <script type="text/javascript"> 
      /* Thanks to: http://www.webmuse.co.uk/blog/custom-getelementsbyclassname-function-for-all-browsers/ */ 
      if (!document.getElementsByClassName) { 
       document.getElementsByClassName = function(classname) { 
        var elArray = []; 
        var tmp = document.getElementsByTagName("*"); 
        var regex = new RegExp("(^|\s)" + classname + "(\s|$)"); 
        for (var i = 0; i < tmp.length; i++) { 
         if (regex.test(tmp[i].className)) { 
          elArray.push(tmp[i]); 
         } 
        }; 
        console.log(elArray); 
        return elArray; 
       }; 
      }; 
      /* Your change font function */ 
      function changeFont(num) { 
       /* Define font swich by class name */ 
       var fromFont = 'first-font'; 
       var toFont = 'second-font'; 
       if (num==2) { 
        fromFont = 'second-font'; 
        toFont = 'first-font'; 
       }; 
       /* Change classes */ 
       var el = document.getElementsByClassName(fromFont); 
       var i = el.length; 
       while(i--) { 
        var item = el[i]; 
        var re = new RegExp('(?:^|\s)' + fromFont + '(?!\S)', 'g'); 
        var oldClasses = item.className; 
        item.className = oldClasses.replace(re, toFont); 
       }; 
       return false; 
      }; 
     </script> 
    </head> 
    <body> 
     <div class="languagefont"> 
      <span class="first-font-btn"> 
       <a onclick="changeFont(2)" href="javascript:"> 
        <span class="second-font other_class1">Change to first-font</span> 
       </a> 
      </span> 
      &nbsp; 
      <span class="second-font-btn"> 
       <a onclick="changeFont(1)" href="javascript:"> 
        <span class="second-font other_class2">Change to second-font</span> 
       </a> 
      </span> 
     </div> 
    </body> 
</html>

来源

2014-11-02 22:07:07 skobaljic

我不想在更改类元素中删除其他类名。如何操作。？ – user3675191 2014-11-03 03:29:59

我已更新答案并添加了正则表达式。关于管理类的更多信息可以在这个[答案]中找到（http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript#answer-196038） – skobaljic 2014-11-03 11:13:39

回答

相关问题