1. 程式人生 > >怎麼用js實現jq的removeClass方法

怎麼用js實現jq的removeClass方法

1、addClass:為指定的dom元素新增樣式。
2、removeClass:刪除指定dom元素的樣式。
3、toggleClass:如果存在(不存在),就刪除(新增)一個樣式。
4、hasClass:判斷樣式是否存在。


原生 JS 程式碼如下:
function hasClass(obj, cls) {
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(obj, cls) {
    if (!this.hasClass(obj, cls)) {
        obj.className += " " + cls;
    }
}

function removeClass(obj, cls) {
    if (hasClass(obj, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        obj.className = obj.className.replace(reg, ' ');
    }
}

function toggleClass(obj,cls){
    if(hasClass(obj,cls)){
        removeClass(obj, cls);
    } else {
        addClass(obj, cls);
    }
}

相關推薦

原生js實現outerWidth()方法到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

怎麼js實現jq的removeClass方法

1、addClass:為指定的dom元素新增樣式。 2、removeClass:刪除指定dom元素的樣式。 3、toggleClass:如果存在(不存在),就刪除(新增)一個樣式。 4、hasClass:判斷樣式是否存在。 原生 JS 程式碼如下: function hasClass(obj, cls) {

JS實現前端分頁的簡單方法

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>分頁</title> <script

js實現搖一搖功能

ice 彈出 update 運動 including scrip read log 頁面 function init(){   if (window.DeviceMotionEvent) {     // 移動瀏覽器支持運動傳感事件     window.addEvent

怎麽點擊一個按鈕顯示當前的時間,js 實現

按鈕 點擊 asc utf script doctype tex 當前 一個 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

JS實現變換背景和字體顏色

gree size out dex ext () func htm round <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ap

JS實現實時顯示系統時間

class mon 星期 itl utf sso inner watermark cti 下面為大家附上代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

js實現頁面跳轉的幾種方式

head 註意 ont rem text pla http bsp cat 通過js或者html或者PHP等動態程序都可以方便的實現跳轉,這裏搜集了幾種頁面跳轉的方式js方式的頁面跳轉1.window.location.href方式 <script langua

JS實現的貪吃蛇遊戲

JavaScript 小遊戲 需要用到html、css、javascript 和 DOM 這些知識點就可以了。主要是js,其他只是一些基本的知識。js貌似也不是很難。但是問題就在這裏,即使知識點都會了,但是還是無法綜合運用把東西做出來 遊戲界面 先把整個遊戲界面做出來: <!DOCTYPE ht

JS實現的俄羅斯方塊

javascript 小遊戲 一邊練習一下javascript,一邊搞的稍微有趣一點。這次的界面就是個table表格。其實所有的操作只要操作tabel的class就可以了。我這裏把顏色直接用 cell.style.backgroundColor 來設置內聯樣式的屬性了。完整代碼如下,預先顯示下一個方塊

JS實現二叉樹

reorder 二叉樹 cto min() col 返回 pos arc [] 用JS實現二叉樹數據結構, 完成遍歷、查找最大/小值、查找特定值以及刪除節點的操作。 參考博文 //定義節點 class Node { constructor(data){

js實現九九乘法表

實現 換行 pre script 九九 for 代碼 scrip ++ 全程用js代碼實現,只需幾行代碼即可,歡迎收藏完整代碼如下:<script>for(var i=1;i<=9;i++){//外層循環決定行的數量 for(var j=1;j<

案例:js實現字符串的駝峰命名法

命名法 orm 修改 UNC get 表示法 駝峰 transform tran <script> //需求:編寫一個函數,將如下字符串‘get-element-by-id‘修改為駝峰表示法‘getElementById‘ function tran

js實現圖片(小球)在屏幕上上下左右移動

tin doctype ctx eight doc itl 左右 idt ext <html> <head> <title>Document</title> </head> <body style

js實現bind方法

ply obj bing span apply code var creat reat //目標函數 function fun(...args) { console.log(this); console.log(args); } //目標函數原型對象上

js實現打字機效果

1.難得有點時間,回憶下古詩文,順便練習下js,實現下打字機效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>打字機</t

js實現一個簡單的mvvm

這裡利用的object.defineproperty() 方法; <input     id='input'><p id='p'><p/>js: const data={}; const input=documen

js 實現 div高度與瀏覽器高度相同

一、讀取瀏覽器高度        可以利用 window.innerHeight 獲得當前瀏覽器的高度 var height = window.innerHeight;   二、獲取 div 物件 var myDiv = docu

js實現一個數據雙向繫結

該接觸angular,就很好奇他是如何實現的,最近有些時間,就查閱了相關的東西,其實很簡單,並沒有想象中的那麼高大上。 從原理觸發 在JavaScript中給一個物件新增屬性可以像下面這樣 obj.age=20; obj.say=function(){} 還可以通過Object.

JS實現計算兩點之間的距離

 雖然題目很簡單,但還是感覺自己敲的程式碼不多,對於JS方法的使用及規則還是不夠熟練,收穫還是很多的,至少認識到了,自己編碼速度還是太慢,思路,邏輯還是不夠清楚。 <!DOCTYPE html> <html>     <head>