Replace Font Class

Question

I want to replace font class in the whole document.
When first-font-btn class click, I want to change class Second-font to first-font in this document.
When second-font-btn class click, I want to change class first-font to second-font in this document.
I have changeFont() method. How to do this problem using pure JavaScript without jQuery? Please Suggest!

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>

Please edit your code to include your `_switch_font()` method so we can see what doesn't work about it. — Bob Brown, Nov 02 '14 at 20:58
You can see _switch_font() method in this plugin. https://wordpress.org/plugins/unicode-zawgyi-combobox/ — user3675191, Nov 02 '14 at 21:03
I using this plugin to change font.Now, I want to change class name only. — user3675191, Nov 02 '14 at 21:07
That is a wrong way to do it. Just change the body class, than refer to it in css. — skobaljic, Nov 02 '14 at 21:20

skobaljic · Accepted Answer · 2014-11-03T11:13:17.697

Here is the working code, assuming these elements have other classes, not just first-font and 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>

i don't want to remove other class name in changing class elements.How to do.? — user3675191, Nov 03 '14 at 03:29
I've updated answer and added regex. More about managing classes can be find in this [answer](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript#answer-196038) — skobaljic, Nov 03 '14 at 11:13

Replace Font Class

1 Answers1