无法将类添加到元素

马蒂亚

我有我无法解释的问题。我有一个简单的<svg>元素,具有“普通”类-> "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) 
乔恩·多佐伊

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

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

使用搜索您喜欢的元素document.querySelectorAll

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

将类添加到父元素

来自分类Dev

将类添加到erb元素

来自分类Dev

将类添加到后续元素

来自分类Dev

将类添加到槽元素 (?)

来自分类Dev

无法将元素添加到arraylist

来自分类Dev

无法将元素添加到数组

来自分类Dev

无法将元素添加到arraylist

来自分类Dev

将类添加到所选元素之外的元素

来自分类Dev

将类添加到动态添加的元素

来自分类Dev

将类添加到动态添加的元素

来自分类Dev

jQuery:无法有条件地将类添加到子元素

来自分类Dev

无法将元素添加到模型类的 ICollection 或更新数据库中的外键

来自分类Dev

将类添加到子元素但不添加到父元素

来自分类Dev

将类添加到被包含的元素中

来自分类Dev

如何使用Deface将类添加到html元素?

来自分类Dev

通过循环将类添加到多个HTML元素

来自分类Dev

Javascript-将类添加到数组中的元素

来自分类Dev

单击嵌套元素将类添加到同级

来自分类Dev

根据URL将活动类添加到父元素

来自分类Dev

根据内容将类添加到DOM中的元素

来自分类Dev

将类添加到Wordpress图片<a>锚元素

来自分类Dev

jQuery将CSS类添加到父<ul>元素

来自分类Dev

将类添加到AngularJs中的多个元素

来自分类Dev

OM如何将类添加到html元素

来自分类Dev

jQuery将类添加到此单击的元素

来自分类Dev

在屏幕顶部时,将类添加到元素

来自分类Dev

将类添加到字符串中的元素

来自分类Dev

使用XML :: LibXML将新类添加到元素

来自分类Dev

如何使用JS将多个类添加到元素?