我有我无法解释的问题。我有一个简单的<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] 删除。
我来说两句