Невозможно добавить класс к элементу

У меня есть проблема, которая необъяснима для меня. У меня есть простой элемент <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>

Также я хочу отметить, что я не получил какой-либо ошибки в консоли так far.First и только раз, когда я получаю ошибку, когда, используя первый способ. Затем я получаю эту ошибку.

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

источник

2016-09-23 Matija

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

решил, но может кто-нибудь объяснить мне, почему мои методы не сработали – Matija

'.className + =" анимированный "' требуется пространство '.className + =" анимированный "';) --- Не знаете, почему вы выполняете функции, однако. – evolutionxbox

В вашем элементе используйте метод classList.add().

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

Поиск нужного элемента с document.querySelectorAll.

источник

2016-09-23 23:50:20 JonDotsoy

Вы подтвердили, что 'classList' поддерживается svg? –

Невозможно добавить класс к элементу

ответ

Смежные вопросы