Как удалить класс в JavaScript?

Question

Как удалить класс в JavaScript?

1

<div id="tab1" class="nav left">
<ul>
<li><a href="/magento/" class="now">Home</a></li>
......
</ul>
</div>

Теперь я хочу удалить class="now" или установить значение класса пустым. Если url не для mangento, я использую следующий код. Но я не знаю, как написать последнюю часть.

window.onload = function removeNow() {
    var div = document.getElementById("tab1").getElementsByTagName("a");
    if (window.location.pathname != '/magento/') {
        div.removeClass();
    }
}

Спасибо.

stackoverflow002 22 нояб. 2012, в 04:49

Источник

3

Общий совет по сопровождению кода: если у вас есть переменная, которая будет содержать ссылку на элемент привязки , не называйте ее div . Кроме того, если переменная должна содержать результат вызова метода, который возвращает список элементов ( .getElementsByTagName() , как предполагает ее имя, может возвращать элемент S во множественном числе), имеет смысл присвоить переменной имя, которое отражает это : divs , а не div , или в данном случае anchors или links или что - то.
nnnnnn 22 нояб. 2012, в 03:18

Теги:

javascript

dom

3 ответа

Ещё вопросы

Общий совет по сопровождению кода: если у вас есть переменная, которая будет содержать ссылку на элемент привязки , не называйте ее div . Кроме того, если переменная должна содержать результат вызова метода, который возвращает список элементов ( .getElementsByTagName() , как предполагает ее имя, может возвращать элемент S во множественном числе), имеет смысл присвоить переменной имя, которое отражает это : divs , а не div , или в данном случае anchors или links или что - то.

0x499602D2 · Answer 1 · 2012-11-22T00-57-00.000Z

В современных браузерах вы можете использовать classList API:

div.classList.remove( 'now' );

Но проблема, специфичная для вашего кода: вы должны выполнить цикл, чтобы удалить класс. Поэтому попробуйте следующее:

for ( var i = 0; i < div.length; i++ ) {

    div[i].classList.remove( 'now' );

}

Если ваш браузер не поддерживает classList, используйте removeClass shim:

function removeClass( elem, name ) {

    var classlist = elem.className.split( /\s/ ), 
        newlist = [], 
        idx = 0;

    for ( ; idx < classlist.length; idx++ ) {
        if ( classlist[ idx ] !== name ) {
            newlist.push( classlist[ idx ] );
        }
    }

    elem.className = newlist.join(" ");

    return true;
}

или jQuery (с которым мы не обязаны использовать classList или className):

$('a').each(function() {

    if (window.location.pathname != '/magento/')
        $(this).removeClass();

});

Ошибка типа: div.classList не определен
@ stackoverflow002 Какой браузер вы используете?
classList - все еще довольно новый API, и некоторые старые браузеры не поддерживают его, включая некоторые популярные. Альтернативой может быть что-то вроде div[i].className = div[i].className.replace(/\bnow\b/g, "");
@ stackoverflow002 Смотрите мои изменения, пожалуйста.
@ Дэвид То, removeClass редактирование removeClass кажется слишком сложным. Разве мой однострочник в предыдущем комментарии не сделал бы то же самое, за исключением того, что, возможно, я оставил несколько лишних пробелов в имени класса?
@ScottSauyet Может быть несколько классов для одного элемента; ваш пример не учитывает это. Удаляет весь список классов.
@David - нет, он удаляет все и все копии «сейчас» из атрибута className, хотя это одноцелевое назначение, а у вас более общее.

Andrew Whitaker · Answer 2 · 2012-11-22T00-14-00.000Z

1

Установите свойство className:

div.className = '';

Andrew Whitaker 22 нояб. 2012, в 00:14

0

извините, я тестировал код в firebug, когда на другой странице он не удаляет класс,
stackoverflow002 22 нояб. 2012, в 02:57
0

Поскольку значение атрибута class НЕ ДОЛЖНО быть пустым , а свойство className отражает это значение, атрибут должен быть удален вместо этого - div.removeAttribute("class") - после того, как будет гарантировано, что в значении нет других имен классов чем те, которые должны быть удалены.
PointedEars 22 нояб. 2012, в 02:59
0

Хм, это скорее всего не та линия. Ваше состояние успешно проходит? Вот рабочий пример: jsfiddle.net/8cpsC
Andrew Whitaker 22 нояб. 2012, в 02:59
0

@PointedEars: Какая часть ссылки показывает, что значение атрибута не может быть пустым? (Это очень хорошо может быть там, я очень устал)
Andrew Whitaker 22 нояб. 2012, в 03:14
0

@AndrewWhitaker «Имя класса или набор имен классов» означает одно имя класса или более.
PointedEars 22 нояб. 2012, в 03:17
1

@PointedEars: я не думаю, что определение cdata-list исключает пустые строки. Я также думаю, что вы воспринимаете определение слишком буквально. Если вы перейдете к валидатору W3 и введете HTML-документ с элементом с пустым атрибутом класса, он будет очень хорошо проверен. Кроме того, кто говорит, что «набор» не может быть пустым?
Andrew Whitaker 22 нояб. 2012, в 03:25
0

@PointedEars: этот документ определяет требования для разметки HTML, а не для действующего DOM.
Scott Sauyet 23 нояб. 2012, в 00:27
0

@AndrewWhitaker Хорошая попытка. Валидатор W3C в режиме HTML 4.01 не может найти проблему, поскольку тип атрибута class в DTD - CDATA . Многие из ограничений в прозе Спецификации не могут быть выражены DTD, включая это. Когда валидатор работает в режиме SGML или XML (режим HTML 4.01 является подмножеством первого), он имеет только DTD для проверки.
PointedEars 23 нояб. 2012, в 04:10
0

@ScottSauyet AISB, значение свойств атрибутов HTML в дереве документа, например, className отражает значение соответствующих атрибутов в документе (здесь: class ).
PointedEars 23 нояб. 2012, в 04:12
1

@PointedEars: свойства атрибутов дерева документа не восстанавливаются волшебным образом и не изменяют разметку. То, что что-то не может быть выражено как допустимая разметка HTML, не означает, что это каким-то образом незаконный документ.
Scott Sauyet 26 нояб. 2012, в 18:20
0

@ScottSauyet Изменение свойств атрибута изменяет дерево документа, что вызывает перекомпоновку . Вы можете наблюдать это, например, на вкладке «Элементы» в Chromium Developer Tools . Нелогично намеренно создавать подверженное ошибкам дерево документов при наличии жизнеспособных альтернатив.
PointedEars 20 дек. 2012, в 17:58
0

@PointedEars: Да, дерево документа изменено. Да, это может вызвать оплавление; это на самом деле, вероятно, смысл делать это. Но я не вижу причин говорить, что документ подвержен ошибкам . Поскольку одна из возможных сериализаций этого дерева документов будет недействительной, это не означает, что с самим документом что-то не так. Я не предполагаю, что с вашей альтернативой что-то не так. Но нет ничего плохого в том, чтобы обновить этот атрибут, чтобы он имел пустое значение.
Scott Sauyet 20 дек. 2012, в 18:27

Показать ещё 10 комментариев

RobG · Answer 3 · 2012-11-22T02-28-00.000Z

Обратите внимание, что getElementsByTagName возвращает (возможно, пустой) NodeList, поэтому:

var div = document.getElementById("tab1").getElementsByTagName("a");

представляет собой совокупность всех потомков элемента A элемента с идентификатором "tab1" (и поэтому "div", вероятно, не является хорошим именем).

Если все, что вы хотите сделать, это удалить все значения класса первого такого элемента A, тогда:

div[0].className = '';

выполнит эту работу. Но поскольку NodeList может быть пустым, следующее будет более надежным:

if (div[0]) {
    div[0].className = '';
}

или, возможно,

div[0] && div[0].className = '';

это зависит от вашего стиля кодирования и требований к совместимости.