对css类名className的一些操作的函数
生活随笔
收集整理的這篇文章主要介紹了
对css类名className的一些操作的函数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
習慣了jQuery已經寫好的針對class的操作,最近看書也看到了針對className的操作,但書上的沒有仔細地針對各個情況進行處理,于是自己就動手寫了,進行了初步的測試,暫沒發現問題。如果有問題請留言
//清除結尾和開頭處的空白符 if (!String.trim) {String.prototype.trim = function () {return this.replace(/^\s+|\s+$/g, '');}; }/*** 取得包含元素className的數組* @param {Node} element*/function getClassName(element) {if (!(element = $(element))) {return false;}return element.className.replace(/\s+/g, ' ').split(' ');}/*** 檢察院蘇中是否存在某個className* @param {Node} element* @param {String} className* @return {Boolean}*/function hasClassName(element, className) {if (!(element = $(element))) {return false;}var classes = getClassName(element);for (var i = 0; i < classes.length; i++) {//檢測className是否匹配,如果是則返回trueif (classes[i] === className) {return true;}}return false;}/*** 為元素添加className* @param element* @param className* @return {Boolean}*/function addClassName(element, className) {if (!(element = $(element))) {return false;}//將className添加到當前className的末尾//如果沒有className,則不包含空格element.className += (element.className ? ' ' : '') + className;return true;}/*** 刪除一個或多個類名* @param element* @param className* @return {Boolean}*/function removeClassName(element, className) {if (!(element = $(element))) {return false;}className = (className || '').trim().replace(/\s+/g, ' ');if (className === '') {//未定義或者空的情況為刪除所有類名element.className = '';} else if (className.indexOf(' ') !== -1) {//對多個以空格為分隔的類名進行處理,然后迭代var classarr = className.split(' ');for (var i = 0; i < classarr.length; i++) {arguments.callee(element, classarr[i]);}} else {//對單個類名的處理className = (' ' + className + ' ');elemClass = ' ' + element.className + ' ';if (elemClass.indexOf(className !== -1)) {element.className = elemClass.replace(className, ' ').replace(/\s+/g, ' ').trim();} else {return false;}}}/*** 切換類名* @param element* @param className*/function toggleClassName(element, className) {if (!hasClassName(element, className)) {addClassName(element, className);} else {removeClassName(element, className);}}
//清除結尾和開頭處的空白符 if (!String.trim) {String.prototype.trim = function () {return this.replace(/^\s+|\s+$/g, '');}; }/*** 取得包含元素className的數組* @param {Node} element*/function getClassName(element) {if (!(element = $(element))) {return false;}return element.className.replace(/\s+/g, ' ').split(' ');}/*** 檢察院蘇中是否存在某個className* @param {Node} element* @param {String} className* @return {Boolean}*/function hasClassName(element, className) {if (!(element = $(element))) {return false;}var classes = getClassName(element);for (var i = 0; i < classes.length; i++) {//檢測className是否匹配,如果是則返回trueif (classes[i] === className) {return true;}}return false;}/*** 為元素添加className* @param element* @param className* @return {Boolean}*/function addClassName(element, className) {if (!(element = $(element))) {return false;}//將className添加到當前className的末尾//如果沒有className,則不包含空格element.className += (element.className ? ' ' : '') + className;return true;}/*** 刪除一個或多個類名* @param element* @param className* @return {Boolean}*/function removeClassName(element, className) {if (!(element = $(element))) {return false;}className = (className || '').trim().replace(/\s+/g, ' ');if (className === '') {//未定義或者空的情況為刪除所有類名element.className = '';} else if (className.indexOf(' ') !== -1) {//對多個以空格為分隔的類名進行處理,然后迭代var classarr = className.split(' ');for (var i = 0; i < classarr.length; i++) {arguments.callee(element, classarr[i]);}} else {//對單個類名的處理className = (' ' + className + ' ');elemClass = ' ' + element.className + ' ';if (elemClass.indexOf(className !== -1)) {element.className = elemClass.replace(className, ' ').replace(/\s+/g, ' ').trim();} else {return false;}}}/*** 切換類名* @param element* @param className*/function toggleClassName(element, className) {if (!hasClassName(element, className)) {addClassName(element, className);} else {removeClassName(element, className);}}
轉載于:https://www.cnblogs.com/webFrontDev/archive/2012/12/02/2798458.html
總結
以上是生活随笔為你收集整理的对css类名className的一些操作的函数的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: C# Socket初探
- 下一篇: 细嚼慢咽C++primer(4)——类(