不能为元素添加class

Can't add class to element

本文关键字：class 添加 元素 不能      更新时间：2023-09-26

我有一个无法解释的问题。我有一个简单的<svg>元素与"正常"类-> "small_circle_svg_menu"。我想给这个元素添加一个类"animated"。我的意思是，这是最简单的事情，我做不好，但可以做一些更复杂的事情。

下面是我为元素添加类的操作。我试着用两种方式增加格调。第一种方法是简单的函数，它检查元素是否有这个类，如果元素没有，就把它添加到元素中。
第二种方法是最简单的方法(您将看到)。

这是第一种方式:
此函数通常将class添加到任何其他元素。我还将document.getElementsByClassName('small_circle_svg_menu')[0]记录到控制台，看看我是否可能记录了错误的元素。(但事实并非如此，我正在记录正确的元素)。

function hasClass(ele,cls) {
  return ele.className.match(new RegExp('(''s|^)'+cls+'(''s|$)'));
}
function addClass(ele,cls) {
  if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
addClass(document.getElementsByClassName('small_circle_svg_menu')[0],"animated")

第二种方式

document.getElementsByClassName('small_circle_svg_menu')[0].className += "animated"

元素在HTML中定位在<header>，所以我将展示整个<header>。

    <header >
      <div class=" menu_circle circles-div ">
        <div class="icn__wrap menu " id="menu">
          <i class="icn__hamburger state_1"  id="icn__hamburger-1" ></i>
          <i class="icn__hamburger state_1"  id="icn__hamburger-2" ></i>
          <i class="icn__hamburger state_1"  id="icn__hamburger-3" ></i>
          <svg class="small_circle_svg_menu  "  version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none"  >
                      <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)" stroke="white" class="small-circle" id="menu_circle"></circle>
          </svg>
        </div>
      </div>
    <img id="logo" src="images/nolo.png" alt="nole.logo"  onclick="fullpage.moveTo(1)"/>
    <div class="page-title background_LG"id="prvinatpis"                >Novak Djokovic</div>
    <div class="page-title background_LG"id="drugastrananatpis"   >News                </div>
    <div class="page-title background_LG"id="trecastrananatpis"    >Tour                  </div>
    <div class="page-title background_LG"id="cetvrtastrananatpis" >Story                 </div>
    <div class="page-title background_LG"id="petastrananatpis"     >Gallery               </div>
</header>

我还想提一下，到目前为止，我在控制台没有得到任何错误。第一次也是唯一一次我得到错误是当使用第一种方式。然后我得到这个错误。

TypeError: ele.className.match is not a function.
(In 'ele.className.match(new RegExp('(''s|^)'+cls+'(''s|$)'))', 'ele.className.match' is undefined)

在你的元素中使用classList.add()方法。

var element = document.getElementById("my-class");
element.classList.add("class-name");

用document.querySelectorAll搜索你喜欢的元素。

相关文章：