成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

lemanli / 512人閱讀

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

1.classList

詳見MDN Element.classList

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

IE10+僅有限兼容，不支持SVG元素，不支持 toggle(), 多參數(shù)的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 | $ ）判斷后面為空格或結(jié)束 兩個感嘆號為轉(zhuǎn)換為布爾值 以方便做判斷
    };
    //增加
    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|$)" )," " );
        };
    };

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53369.html

相關(guān)文章

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

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

    liujs 評論0 收藏0

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

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

    QLQ 評論0 收藏0

  • js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,scr

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

    toddmark 評論0 收藏0

  • AngularJS簡述

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

    Jason 評論0 收藏0

  • JavaScript DOM節(jié)點簡介

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

    silvertheo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<