原生JS操作DOM元素的類名class

QLQ 發布于2019-08-29 17:28 / 1509人閱讀

摘要：如果這些類已經存在于元素的屬性中，那么它們將被忽略。刪除指定的類值。按集合中的索引返回類值。用一個新類替換已有類。

1.classList

詳見MDN Element.classList

add( String [, String] )
添加指定的類值。如果這些類已經存在于元素的屬性中，那么它們將被忽略。
remove( String [,String] )
刪除指定的類值。
item ( Number )
按集合中的索引返回類值。
toggle ( String [, force] )
當只有一個參數時：切換 class value; 即如果類存在，則刪除它并返回false，如果不存在，則添加它并返回true。
當存在第二個參數時：如果第二個參數的計算結果為true，則添加指定的類值，如果計算結果為false，則刪除它
contains( String )
檢查元素的類屬性中是否存在指定的類值。
replace( oldClass, newClass )
用一個新類替換已有類。

IE10+僅有限兼容，不支持SVG元素，不支持 toggle(), 多參數的add()和remove(), 以及replace()

2.className + 字符串操作

    var classValue = element.className;
    //加上空格, 不然想查詢"abc"，若原本有"abcd"的類名的就會有問題
    classValue = " " + classValue + " ";
    //查詢
    classValue.indexOf(" yourClassName ") === -1 ? false : true;//同樣的查詢時也要帶上空格*2
    //增加
    classValue += " yourClassName";//注意空格*1
        //或
    classValue = classVal.concat(" someClassName");//注意空格*1
    element.setAttribute("class", classValue);
    //刪除
    classValue = classValue.replace(" yourClassName "," ");//注意空格*3
    element.setAttribute("class",classValue );
    //修改
    classValue = classValue.replace(" targetClassName "," yourClassName ");//注意空格*4
    element.setAttribute("class",classValue );

3.className + 正則

和上面的方法一樣，只是空格換成了正則判斷

    var element = document.querySelector("#yourId");
    //查詢
    function hasClass( element,yourClassName ){
    return !!element.className.match( new RegExp( "(s|^)" + yourClassName + "(s|$)") );
    // ( s|^ ) 判斷前面為空格或起始 （s | $ ）判斷后面為空格或結束 兩個感嘆號為轉換為布爾值 以方便做判斷
    };
    //增加
    function addClass( element,yourClassName ){
    if( !hasClass( element,yourClassName ) ){
    element.className += " " + yourClassName;
    };
    };
    //刪除
    function removeClass( element,yourClassName ){
        if( hasClass( element,yourClassName ) ){
            element.className = element.className.replace( new RegExp( "(s|^)" + yourClassName + "(s|$)" )," " );
        };
    };

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114344.html

原生JS操作DOM元素的類名class

摘要：如果這些類已經存在于元素的屬性中，那么它們將被忽略。刪除指定的類值。按集合中的索引返回類值。用一個新類替換已有類。 1.classList 詳見MDN Element.classList add( String [, String] )添加指定的類值。如果這些類已經存在于元素的屬性中，那么它們將被忽略。remove( String [,String] )刪除指定的類值。item ( N...

liujs 2019-08-23 13:51 評論0 收藏0
原生JS操作DOM元素的類名class

摘要：如果這些類已經存在于元素的屬性中，那么它們將被忽略。刪除指定的類值。按集合中的索引返回類值。用一個新類替換已有類。 1.classList 詳見MDN Element.classList add( String [, String] )添加指定的類值。如果這些類已經存在于元素的屬性中，那么它們將被忽略。remove( String [,String] )刪除指定的類值。item ( N...

lemanli 2019-08-02 12:08 評論0 收藏0
js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

摘要：什么是，文檔對象模型。是萬維網聯盟的標準，定義了訪問和文檔的標準。在的標準中，是獨于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容結構和樣式。獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。什么是DOM? DOM，文檔對象模型（Document Object Model）。DOM是 W3C（萬維網聯盟）的標準，DOM定義了訪問HTML和XML文檔的標準。...

toddmark 2019-08-23 12:00 評論0 收藏0
AngularJS簡述

流行框架簡介 angularjs是一款非常優秀的前端高級JS框架，由谷歌團隊開發維護，能夠快速構建單頁web應用，化繁為簡無論是angularjs還是jQuery都是用原生JS封裝的庫：對代碼進行封裝，調用封裝的方法，簡化操作傳統方式是用get方式獲取元素，然后點方法 jQuery庫實現了對獲取方式的封裝，對方法的封裝框架：提供代碼書寫規則，按照規則去寫代碼，框架會幫我們實現響應的功能...

Jason 2019-08-23 11:25 評論0 收藏0
JavaScript DOM節點簡介

摘要：如果傳遞的參數是，將遞歸復制當前節點的所有子孫節點。的話只復制當前節點。設置內容時，能將里面的標簽渲染成正常的標簽。 DOM由節點組成在 HTML DOM （文檔對象模型）中，每個部分都是節點：文檔本身是文檔節點所有 HTML 元素是元素節點所有 HTML 屬性是屬性節點HTML 元素內的文本是文本節點注釋是注釋節點 1．重要節點類型：標簽(元素)節點，屬性節點，文本節點。 2．重要...

silvertheo 2019-08-02 14:00 評論0 收藏0