无法将类添加到元素

Question

无法将类添加到元素

3

我有一个对我来说无法解释的问题。我有一个简单的<svg>元素，具有“normal”类-->"small_circle_svg_menu"。我想要给该元素添加一个"animated"类。这是最简单的事情，但我做不好，却可以做更复杂的事情。

以下是我尝试添加类的两种方式。第一种方法是检查元素是否具有该类，如果元素没有该类，则将其添加到元素中。第二种方式是最简单的方式（您将看到）。 第一种方法： 此函数通常向任何其他元素添加类。我还将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)

- Matija

classList.add('class-name') - evolutionxbox

已解决，但有人能解释一下为什么我的方法不起作用吗？ - Matija

.className += "animated" 需要加一个空格 .className += " animated" ;) --- 不过我不确定为什么你的函数没有起作用。 - evolutionxbox

this 在 addClass 中未定义，即使是 hasClass 也不属于任何类。 - Code Spirit

@CodeSpirit，这些函数不是我自己写的，我是在Github上找到的。但是到目前为止，它们都没有出现任何问题。您能否指定我应该怎么做才能使它们适用于该元素？同时我也注意到"addClass"对于其他一些元素也不起作用，但对于大多数元素都有效。 - Matija

好的，我尝试选择每个元素，对于除了<svg>元素之外的每个元素都有效，但是我不知道为什么，有人知道吗？ - Matija

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JonDotsoy · Accepted Answer

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

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

使用document.querySelectorAll查找您喜欢的元素。