<ul class="nav">

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

    <li>欄目2</li>

    <li>欄目3</li>

</ul>

<script type="text/javascript">

    // 獲取到當前的li元素

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

    // 打印classList屬性

    console.log(activeLi.classList)

    // 控制臺輸出：

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

</script>

控制臺查看效果：

classList屬性類型：

classList屬性是 DOMTokenList 類型，可以通過add、contains、remove等方法對類屬性進行操作。

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

2、實務應用

實務中，欄目是切換是很常用的一個應用。接上面的例子，當點擊欄目時將 active 移動到對應的欄目

<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元素設置點擊事件

    while (currentElement) {

        currentElement.onclick = function() {

            // 移除激活li的active

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

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

            this.classList.add("active");

        }

        currentElement = currentElement.nextElementSibling;

    }

</script>

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

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

您可能感興趣的文章: