使用JavaScript在類之間切換

Question

我有以下代碼。

HTML在下面。

<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低於

.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); 
} 

我想是切換正常和變化之間我的div類每當我點擊的div元素裏面。 我知道如何使用jQuery但我想用純JavaScript？

以下是我嘗試

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

Answer 1

getElementsByClassName返回元素列表，而不是單個元素。所以你需要從它得到第一個元素，它實際上是指你的div。代碼應該是這個樣子：

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"); 
    }; 

演示：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/

Answer 2

(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'; 
      } 
     }; 

    } 
}()); 

還沒有測試，但是這應該做的伎倆。

Answer 3

如果瀏覽器支持不是問題，您可以使用toggle() method/classList。

Example Here

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

Browser support for classList。

Answer 4

如果你想要的東西是跨瀏覽器，使用純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'); 
    }); 
}); 

在jsFiddle