替換字體類

-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

回答

相關問題