快捷導(dǎo)航

JavaScript利用html5新方法操作元素類名詳解

更新時(shí)間：2022年01月24日 13:15:35 作者：快樂(lè)編程

這篇文章主要給大家分享的是JavaScript用html5新方法操作元素類名的詳解，早先JavaScript處理起來(lái)特別不方便，需要先取到class屬性，然后對(duì)字符串進(jìn)行處理?，F(xiàn)在html5給所有元素增加了classList屬性來(lái)操作類屬性，非常方便，下面就一起來(lái)看看具體操作過(guò)程吧

1、classList屬性

先看如下代碼：

<ul class="nav">

    <li class="active">欄目1</li>

    <li>欄目2</li>

    <li>欄目3</li>

</ul>

<script type="text/javascript">

    // 獲取到當(dāng)前的li元素

    let activeLi = document.querySelector(".active");

    // 打印classList屬性

    console.log(activeLi.classList)

    // 控制臺(tái)輸出：

    //     DOMTokenList ['active', value: 'active']

</script>

控制臺(tái)查看效果：

classList屬性類型：

classList屬性是 DOMTokenList 類型，可以通過(guò)add、contains、remove等方法對(duì)類屬性進(jìn)行操作。

add(value) 新增加一個(gè)類名。
contains(value) 是否包含類名。
remove(value) 刪除類名。
toggle(value) 如果類名存在則刪除，否則添加。

2、實(shí)務(wù)應(yīng)用

實(shí)務(wù)中，欄目是切換是很常用的一個(gè)應(yīng)用。接上面的例子，當(dāng)點(diǎn)擊欄目時(shí) 將 active 移動(dòng)到對(duì)應(yīng)的欄目

<ul class="nav">

    <li class="item active">欄目1</li>

    <li class="item">欄目2</li>

    <li class="item">欄目3</li>

</ul>

 

<script type="text/javascript">

    let currentElement = document.querySelector(".nav").firstElementChild;

    // 遍歷li元素設(shè)置點(diǎn)擊事件

    while (currentElement) {

        currentElement.onclick = function() {

            // 移除激活li的active

            document.querySelector(".active").classList.remove("active");

            // 當(dāng)前l(fā)i類增加active

            this.classList.add("active");

        }

        currentElement = currentElement.nextElementSibling;

    }

</script>

這樣實(shí)現(xiàn)起來(lái)就很方便了，不用影響到其他類名。

到此這篇關(guān)于JavaScript用html5新方法操作元素類名詳解的文章就介紹到這了,更多相關(guān)JavaScript用html5新方法操作元素類名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: