Question

试图弄清楚如何使用javascript找到一个类并为其添加一个类。所有在线示例都带有id，我需要找到类。任何想法的人？

我在页面加载后添加一个类。

<nav class="menu custom-effect" id="customMenu">
                    <ul class="menu-list">
                        <li class="menu-item current_page_item"><a href="#" class="menu__link">Home</a></li>
                        <li class="menu-item"><a href="#" class="menu__link">Who we are</a></li>
                        <li class="menu-item"><a href="#" class="menu__link">What we offer</a></li>
                        <li class="menu-item"><a href="#" class="menu__link">Our news</a></li>
                        <li class="menu-item"><a href="#" class="menu__link">Contact us</a></li>
                    </ul>
                </nav>

<script>
    document.addEventListener("DOMContentLoaded", function(){
                      // document.getElementById("current_page_item").classList.add( "current-page");

                      var element = document.getElementById("customMenu");
                      var elementClass = element.getElementsByClassName("current_page_item");
                      elementClass[0].ClassNames.add("extraClass");



                      console.log(element);
                        console.log(elementClass);


                    });
            </script>

Answer 1

当你搜索一个类时，你会得到一个我理解的数组而不仅仅是一个元素，所以你需要引用你想要的元素，因为它会获取所有的类。该代码的安装是

<script>
  var element = document.getElementById("menu-main-menu");
                  var elementClass = element.getElementsByClassName("current_page_item");
                  elementClass[0].classList.add("foo");
</script>

这些方法的classList实现现在非常简单，我理解了这个问题：

//添加了类＆＃34; foo＆＃34;到el

el.classList.add（＆＃34;富＆＃34）;

//删除了课程＆＃34; bar＆＃34;来自el

el.classList.remove（＆＃34; BAR＆＃34）;

//切换班级＆＃34; foo＆＃34;

el.classList.toggle（＆＃34;富＆＃34）;

//输出＆＃34; true＆＃34;控制台如果el包含＆＃34; foo＆＃34;，＆＃34; false＆＃34;如果不是

console.log（el.classList.contains（＆＃34; foo＆＃34;））;

//将多个类添加到el

el.classList.add（＆＃34; foo＆＃34;，＆＃34; bar＆＃34;）;

如何使用Javascript而不是JQ将类添加到类中

1 个答案: