Switching between classes using JavaScript

Question

Switching between classes using JavaScript

I have the following code.

HTML below.

<div class="normal">
    <p>This is  Paragraph No.1</p>
    <p>This is  Paragraph No.2</p>
    <p>This is  Paragraph No.3</p>
    <p>This is  Paragraph No.4</p>
    <p>This is  Paragraph No.5</p>           
</div>

CSS below

.normal {
    color: #808080;
    border: 4px solid blue;
    border-radius: 50px 50px;
    width: 800px;
    font-family: 'Comic Sans MS';
    margin: auto;
    margin-top: 10px;
    font-size: 30px;
    -webkit-transform: rotate(10deg);
}

.change {
    color:#ffd800;
    border: 6px solid orange;
    border-radius: 50px 50px;
    width: 800px;
    font-family: 'Comic Sans MS';
    margin: auto;
    margin-top: 10px;
    font-size: 30px;
    -webkit-transform: rotate(20deg);
}

What I want is to switch my div class between normal and change every time I click inside a div element. I know how to do this using jQuery , but I want to use pure javascript?

Here is my attempt

(function () {
    var pElement = document.getElementsByClassName("normal");
    pElement.onclick = function () {
       //what to do here
    };
} ());

+4

javascript html css

Naseer ahmed May 12, '14 at 20:25

source share

4 answers

, toggle()/classList.

(function () {
    var pElement = document.getElementsByClassName("normal")[0];
    pElement.addEventListener('click',function(){
       pElement.classList.toggle('change');
    });
} ());

classList.

+5

Josh Crozier 12 '14 20:30

(function () {
    var pElements = document.getElementsByClassName("normal");

    for ( p in pElements ) {

        p.onclick = function () {
            if ( this.className.indexOf('normal') > -1 ) {
                this.className = 'change';
            } else {
                this.className = 'normal';
            }
        };

    }
} ());

, .

0

Martin 12 '14 20:29

-, , javascript ( , jQuery), - ( @JoshCrozier, , . UMD , , - ). === ?:)

Javascript -

/*global window, document, module, define, $ */

(function () {
    'use strict';

    var commands = {},
        MAX_UINT32 = 4294967295,
        baseFunction = function () {
            return;
        },
        privateUndefined = (baseFunction()),
        hasOwn = commands.hasOwnProperty,
        toClass = commands.toString,
        trimFN = ''.trim,
        baseArray = [],
        slice = baseArray.slice,
        forEachFN = baseArray.forEach,
        filterFN = baseArray.filter,
        $ = {},
        makeRegex;

    function isFunction(arg) {
        return typeof arg === 'function';
    }

    function throwIfNotFunction(arg) {
        if (!isFunction(arg)) {
            throw new TypeError('is not a function');
        }

        return arg;
    }

    function isUndefined(arg) {
        return privateUndefined === arg;
    }

    function isNull(arg) {
        return null === arg;
    }

    function isUndefinedOrNull(arg) {
        return isUndefined(arg) || isNull(arg);
    }

    function isObject(arg) {
        return toClass.call(arg) === '[object Object]';
    }

    function isString(arg) {
        return typeof arg === 'string';
    }

    function isNumber(arg) {
        return typeof arg === 'number';
    }

    function isBoolean(arg) {
        return typeof arg === 'boolean';
    }

    function handler(object, evt, func) {
        var ret;

        if (evt) {
            ret = func.call(object, evt);
            if (false === ret) {
                evt.stopPropagation();
                evt.preventDefault();
            }
        } else {
            window.event.target = window.event.srcElement;
            ret = func.call(object, window.event);
            if (false === ret) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }
        }

        return ret;
    }

    $.addEventListener = function (object, type, func) {
        var uid = type + ':' + func,
            euid = 'e:' + uid;

        object[euid] = func;
        if (isFunction(object.addEventListener)) {
            object[uid] = function (evt) {
                handler(object, evt, object[euid]);
            };

            object.addEventListener(type, object[uid], false);
        } else if (isObject(object.attachEvent)) {
            object[uid] = function () {
                handler(object, null, object[euid]);
            };

            object.attachEvent('on' + type, object[uid]);
        } else {
            throw new Error('Handler could not be added.');
        }
    };

    $.removeEventListener = function (object, type, func) {
        var uid = type + ':' + func,
            euid = 'e:' + uid;

        if (isFunction(object.removeEventListener)) {
            object.removeEventListener(type, object[uid], false);
        } else if (isObject(object.detachEvent)) {
            object.detachEvent('on' + type, object[uid]);
        } else {
            throw new Error('Handler could not be removed.');
        }

        object[euid] = null;
        object[uid] = null;
        delete object[euid];
        delete object[uid];
    };

    if (isFunction(trimFN)) {
        $.trim = function (text) {
            return trimFN.call(text);
        };
    } else {
        $.trim = function (text) {
            return text.replace(/^\s+|\s+$/g, '');
        };
    }

    if ('classList' in document.body) {
        $.classList = {
            contains: function (node, className) {
                return node.classList.contains(className);
            },

            add: function add(node, className) {
                node.classList.add(className);
            },

            remove: function (node, className) {
                node.classList.remove(className);
            },

            toggle: function (node, className) {
                node.classList.toggle(className);
            }
        };
    } else {
        makeRegex = function (className, flags) {
            return new RegExp('(?:^|\\s)' + className + '(?!\\S)', isString(flags) ? flags : '');
        };

        $.classList = {
            contains: function (node, className) {
                return !!node.className.match(makeRegex(className));
            },

            add: function add(node, className) {
                if (!$.classList.contains(node, className)) {
                    node.className = $.trim(node.className);
                    if (node.className) {
                        node.className += ' ';
                    }

                    node.className += className;
                }
            },

            remove: function (node, className) {
                if ($.classList.contains(node, className)) {
                    node.className = $.trim(node.className.replace(makeRegex(className, 'g'), ''));
                }
            },

            toggle: function (node, className) {
                if ($.classList.contains(node, className)) {
                    $.classList.remove(node, className);
                } else {
                    $.classList.add(node, className);
                }
            }
        };
    }

    function checkObjectCoercible(inputArg) {
        if (isUndefinedOrNull(inputArg)) {
            throw new TypeError('Cannot convert "' + inputArg + '" to object');
        }

        return inputArg;
    }

    function argToObject(inputArg) {
        var object = checkObjectCoercible(inputArg);

        if (isBoolean(object) || isNumber(object) || isString(object)) {
            object = commands.constructor(object);
        }

        return object;
    }

    function clamp(number, min, max) {
        return Math.min(Math.max(number, min), max);
    }

    if (isFunction(forEachFN)) {
        $.forEach = function (array) {
            return forEachFN.apply(array, slice.call(arguments, 1));
        };
    } else {
        $.forEach = function (array, fn, thisArg) {
            var object = argToObject(array),
                length,
                index;

            throwIfNotFunction(fn);
            for (index = 0, length = clamp(object.length, 0, MAX_UINT32); index < length; index += 1) {
                if (hasOwn.call(object, index)) {
                    fn.call(thisArg, object[index], index, object);
                }
            }
        };
    }

    if (isFunction(filterFN)) {
        $.filter = function (array) {
            return filterFN.apply(array, slice.call(arguments, 1));
        };
    } else {
        $.filter = function (array, fn, thisArg) {
            var object = argToObject(array),
                next,
                length,
                arr,
                index,
                element;

            throwIfNotFunction(fn);
            for (arr = [], next = index = 0, length = clamp(object.length, 0, MAX_UINT32); index < length; index += 1) {
                if (hasOwn.call(object, index)) {
                    element = object[index];
                    if (fn.call(thisArg, element, index, object)) {
                        arr[next] = element;
                        next += 1;
                    }
                }
            }

            return arr;
        };
    }

    if ('getElementsByClassName' in document) {
        $.getElementsByClassName = function (elementNode, className) {
            return elementNode.getElementsByClassName(className);
        };
    } else {
        $.getElementsByClassName = function (elementNode, className) {
            return $.filter(elementNode.getElementsByTagName('*'), function (element) {
                return $.classList.contains(element, className) ? element : privateUndefined;
            });
        };
    }

    if (typeof module === 'object' && module && typeof module.exports === 'object' && module.exports) {
        module.exports = $;
    } else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
        define($);
    } else {
        window.$ = $;
    }
}());

Javascript - .

$.forEach($.getElementsByClassName(document, 'normal'), function (element) {
    $.addEventListener(element, 'click', function () {
        $.classList.toggle(element, 'change');
    });
});

On jsFiddle

0

Xotic750 May 12, '14 at 22:01

source share

GolezTrol · Accepted Answer · 2014-05-12T20:30:50+0000

getElementsByClassName returns a list of elements, not a single element. So you want to get the first element from it that actually refers to your div. The code should look something like this:

var pElements = document.getElementsByClassName("normal");
var pElement = pElements[0];
    pElement.onclick = function () {
       if (this.getAttribute("class") == "normal")
         this.setAttribute("class", "change")
       else
         this.setAttribute("class", "normal");
    };

Demo: http://jsfiddle.net/2QqU5/

RobG, document.getElementsByClassName() , . IE8 . document.querySelectorAll(".normal"). . ( CSS). , document.querySelector(".normal"), . , , jQuery, jQuery.

, className, get/setAttribute.

, :

var pElement = document.querySelector(".normal");
    pElement.onclick = function () {
       if (this.className == "normal")
         this.className = "change";
       else
         this.className = "normal";
    };

: http://jsfiddle.net/2QqU5/2/

Switching between classes using JavaScript

More articles: