Как заменить класс у элемента js
Перейти к содержимому

Как заменить класс у элемента js

  • автор:

Как заменить классы у элемента Jquery\Js

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

  • javascript
  • jquery
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420

Классы

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017 .

Классы в JavaScript были введены в ECMAScript 2015 и представляют собой синтаксический сахар над существующим в JavaScript механизмом прототипного наследования. Синтаксис классов не вводит новую объектно-ориентированную модель, а предоставляет более простой и понятный способ создания объектов и организации наследования.

Определение классов

На самом деле классы — это «специальные функции», поэтому точно также, как вы определяете функции (function expressions и function declarations), вы можете определять и классы с помощью: class declarations и class expressions.

Объявление класса

Первый способ определения класса — class declaration (объявление класса). Для этого необходимо воспользоваться ключевым словом class и указать имя класса (в примере — «Rectangle»).

class Rectangle  constructor(height, width)  this.height = height; this.width = width; > > 
Подъём (hoisting)

Разница между объявлением функции (function declaration) и объявлением класса (class declaration) в том, что объявление функции совершает подъём (hoisting), в то время как объявление класса — нет. Поэтому вначале необходимо объявить ваш класс и только затем работать с ним, а код же вроде следующего сгенерирует исключение типа ReferenceError :

var p = new Rectangle(); // ReferenceError class Rectangle > 

Выражение класса

Второй способ определения класса — class expression (выражение класса). Можно создавать именованные и безымянные выражения. В первом случае имя выражения класса находится в локальной области видимости класса и может быть получено через свойства самого класса, а не его экземпляра.

// безымянный var Rectangle = class  constructor(height, width)  this.height = height; this.width = width; > >; console.log(Rectangle.name); // отобразится: "Rectangle" // именованный var Rectangle = class Rectangle2  constructor(height, width)  this.height = height; this.width = width; > >; console.log(Rectangle.name); // отобразится: "Rectangle2" 

Примечание: выражения класса подвержены тем же проблемам с подъёмом (hoisting), что и объявления класса.

Тело класса и задание методов

Тело класса — это часть кода, заключённая в фигурные скобки <> . Здесь вы можете объявлять члены класса, такие как методы и конструктор.

Строгий режим

Тела объявлений классов и выражений классов выполняются в строгом режиме (strict mode).

Constructor

Метод constructor — специальный метод, необходимый для создания и инициализации объектов, созданных, с помощью класса. В классе может быть только один метод с именем constructor . Исключение типа SyntaxError будет выброшено, если класс содержит более одного вхождения метода constructor .

Ключевое слово super можно использовать в методе constructor для вызова конструктора родительского класса.

Методы прототипа

class Rectangle  constructor(height, width)  this.height = height; this.width = width; > get area()  return this.calcArea(); > calcArea()  return this.height * this.width; > > const square = new Rectangle(10, 10); console.log(square.area); // 100 

Статические методы и свойства

Ключевое слово static , определяет статический метод или свойства для класса. Статические методы и свойства вызываются без инстанцирования (en-US) их класса, и не могут быть вызваны у экземпляров (instance) класса. Статические методы, часто используются для создания служебных функций для приложения, в то время как статические свойства полезны для кеширования в рамках класса, фиксированной конфигурации или любых других целей, не связанных с реплецированием данных между экземплярами.

class Point  constructor(x, y)  this.x = x; this.y = y; > static displayName = "Точка"; static distance(a, b)  const dx = a.x - b.x; const dy = a.y - b.y; return Math.hypot(dx, dy); > > const p1 = new Point(5, 5); const p2 = new Point(10, 10); p1.displayName; //undefined p1.distance; //undefined p2.displayName; //undefined p2.distance; //undefined console.log(Point.displayName); // "Точка" console.log(Point.distance(p1, p2)); // 7.0710678118654755 

Привязка this в прототипных и статических методах

Когда статический или прототипный метод вызывается без привязки к this объекта (или когда this является типом boolean, string, number, undefined, null), тогда this будет иметь значение undefined внутри вызываемой функции. Поведение будет таким же даже без директивы «use strict» , потому что код внутри тела класса всегда выполняется в строгом режиме.

class Animal  speak()  return this; > static eat()  return this; > > let obj = new Animal(); obj.speak(); // объект Animal let speak = obj.speak; speak(); // undefined Animal.eat(); // класс Animal let eat = Animal.eat; eat(); // undefined 

Если мы напишем этот же код используя классы основанные на функциях, тогда произойдёт автоупаковка основанная на значении this, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдёт — значение this останется прежним.

function Animal() > Animal.prototype.speak = function ()  return this; >; Animal.eat = function ()  return this; >; let obj = new Animal(); let speak = obj.speak; speak(); // глобальный объект (нестрогий режим) let eat = Animal.eat; eat(); // глобальный объект (нестрогий режим) 

Свойства экземпляра

Свойства экземпляра должны быть определены в методе класса:

class Rectangle < constructor(height, width) < this.height = height; this.width = width; >>

Статические (class-side) свойства и свойства прототипа должны быть определены за рамками тела класса:

Rectangle.staticWidth = 20; Rectangle.prototype.prototypeWidth = 25;

Определение полей

Предупреждение: Публичные и приватные поля — это экспериментальная особенность (stage 3), предложенная комитетом TC39 по стандартам языка Javascript. Поддержка браузерами ограничена, но это нововведение может быть использовано на моменте сборки, используя к примеру Babel.

Публичные поля

Используя Javascript синтаксис определения полей, приведённый выше пример может быть изменён следующим образом:

class Rectangle < height = 0; width; constructor(height, width) < this.height = height; this.width = width; >>

Как видно из примера, поля могут быть объявлены как со начальным значением, так и без него.

Более подробно об этом написано в публичные поля класса.

Приватные поля

Предыдущий пример может быть изменён следующим образом, используя приватные поля:

class Rectangle < #height = 0; #width; constructor(height, width) < this.#height = height; this.#width = width; >>

Приватные поля могут быть изменены или прочитаны только в рамках класса и не могут быть вызваны извне. Определяя вещи, которые не видны за пределами класса, вы гарантируете, что пользователи ваших классов не могут зависеть от внутренних компонентов, которые могут изменить версию на версию.

Примечание: Приватные поля могут быть объявлены только заранее в объявлении поля.

Приватные поля не могут быть созданы позже путём присваивания им значения, в отличии от обычных свойств.

Более подробно об этом написано в Приватные поля класса.

Наследование классов с помощью extends

Ключевое слово extends используется в объявлениях классов и выражениях классов для создания класса, дочернего относительно другого класса.

class Animal  constructor(name)  this.name = name; > speak()  console.log(`$this.name> издаёт звук.`); > > class Dog extends Animal  constructor(name)  super(name); // вызывает конструктор super класса и передаёт параметр name > speak()  console.log(`$this.name> лает.`); > > let d = new Dog("Митци"); d.speak(); // Митци лает 

Если в подклассе присутствует конструктор, он должен сначала вызвать super, прежде чем использовать this.

Аналогичным образом можно расширять традиционные, основанные на функциях «классы»:

function Animal(name)  this.name = name; > Animal.prototype.speak = function ()  console.log(`$this.name> издаёт звук.`); >; class Dog extends Animal  speak()  console.log(`$this.name> лает.`); > > let d = new Dog("Митци"); d.speak(); // Митци лает // Для аналогичных методов дочерний метод имеет приоритет над родительским. 

Обратите внимание, что классы не могут расширять обычные (non-constructible) объекты. Если вам необходимо создать наследование от обычного объекта, в качестве замены можно использовать Object.setPrototypeOf() :

var Animal =  speak()  console.log(`$this.name> издаёт звук.`); >, >; class Dog  constructor(name)  this.name = name; > > // Если вы этого не сделаете, вы получите ошибку TypeError при вызове speak. Object.setPrototypeOf(Dog.prototype, Animal); let d = new Dog("Митци"); d.speak(); // Митци издаёт звук. 

Species

Допустим, вам хотелось бы возвращать объекты типа Array в вашем производном от массива классе MyArray . Паттерн species позволяет вам переопределять конструкторы по умолчанию.

Например, при использовании таких методов, как map() , который возвращает конструктор по умолчанию, вам хотелось бы, чтобы они возвращали родительский объект Array вместо объекта MyArray . Символ Symbol.species позволяет это реализовать:

class MyArray extends Array  // Изменить species на родительский конструктор Array static get [Symbol.species]()  return Array; > > var a = new MyArray(1, 2, 3); var mapped = a.map((x) => x * x); console.log(mapped instanceof MyArray); // false console.log(mapped instanceof Array); // true 

Обращение к родительскому классу с помощью super

Ключевое слово super используется для вызова функций на родителе объекта.

class Cat  constructor(name)  this.name = name; > speak()  console.log(`$this.name> издаёт звук.`); > > class Lion extends Cat  speak()  super.speak(); console.log(`$this.name> рычит.`); > > let l = new Lion("Фаззи"); l.speak(); // Фаззи издаёт звук. // Фаззи рычит. 

Mix-ins

Абстрактные подклассы, или mix-ins, — это шаблоны для классов. У класса в ECMAScript может быть только один родительский класс, поэтому множественное наследование (к примеру, от tooling classes) невозможно. Функциональность должен предоставлять родительский класс.

Для реализации mix-ins в ECMAScript можно использовать функцию, которая в качестве аргумента принимает родительский класс, а возвращает подкласс, его расширяющий:

var calculatorMixin = (Base) => class extends Base  calc() > >; var randomizerMixin = (Base) => class extends Base  randomize() > >; 

Класс, использующий такие mix-ins, можно описать следующим образом:

class Foo > class Bar extends calculatorMixin(randomizerMixin(Foo)) > 

Спецификации

Specification
ECMAScript Language Specification
# sec-class-definitions

Совместимость с браузерами

BCD tables only load in the browser

Повторное определение класа

Класс не может быть переопределён. Попытка этого приведёт к SyntaxError .

Если мы запускаете код в веб браузере, к примеру в Firefox Web Console (Tools > Web Developer > Web Console) и вы используете (‘Run’) определение класса с одним и тем же именем дважды, вы получите SyntaxError: redeclaration of let ClassName; . (Обсуждение по ошибке можно посмотреть в Firefox bug 1428672.) Chrome Developer Tools возвращает сообщение типа Uncaught SyntaxError: Identifier ‘ClassName’ has already been declared at :1:1 .

Смотрите также

  • Функции
  • Определение классов
  • Выражение классов
  • Публичные поля класса
  • Приватные поля класса
  • super
  • Статья в блоге: «ES6 In Depth: Classes»
  • Fields and public/private class properties proposal (stage 3)

Управление классами и стилями элементов в JavaScript

В этой статье мы рассмотрим различные методы для работы с классами и стилями элемента. Познакомимся со свойствами classList и style, и примерами их использования для управления соответственно классами и стилями элементов на странице.

Управление классом (классами) элемента

Первый способ взаимодействия с классами элементов сводится к использованию DOM-свойства className . Данное свойство является отражением атрибута class в DOM. DOM-свойство className не было названо class из-за того, что раньше в JavaScript зарезервированные слова нельзя было использовать в качестве названия свойств объектов. Если вы не знаете, что такое DOM-свойства и чем они отличаются от атрибутов, то прочитать про это можете в этой статье.

Пример, в котором выполним различные операции над классом элемента используя DOM-свойство className :

.

Второй способ выполнить операции, связанные с классом элемента – это использовать методы для управления атрибутами.

Пример, в котором выполним действия как вышеприведённом коде, но с использованием методов для управления атрибутами:

.

DOM-свойство className и атрибут class всегда синхронизуются между собой, это значит, что при изменении одного меняется и другое.

Но у элемента может быть не один класс, а несколько. В этом случае работать с ними как со строкой не очень удобно.

Например, определить наличие какого-то одного определённого класса у элемента, используя вышеприведённые способы уже нельзя осуществить так просто. Это потребует написание определённого кода.

Пример, в котором проверим наличие у элемента класса content__show :

.

Но кроме этой ситуации, встречаются и другие. Например, когда нужно добавить какой-то один определённый класс к элементу, или удалить его. Чтобы эти действия и другие производить очень просто у элемента есть специальное для этих случаев DOM-свойство classList .

Свойство classList

Свойство classList представляет собой специальный объект (DOMTokenList), который содержит методы для выполнения различных операций над классами элемента.

  • .add( className1[,className2. ] ) — добавляет один или несколько указанных классов к элементу. Если у элемента уже есть данный класс, то он к нему добавлен не будет.
  • .remove( className1[,className2. ] ) — удаляет один или несколько указанных классов у элемента. Если у элемента нет класса, который вы хотите удалить, то никаких действий произведено не будет.
  • .contains( className ) – проверяет наличие класса у элемента; в качестве ответа возвращает true или false .
  • .toggle( className [,flag] ) — переключает указанное имя класса у элемента, т.е. если у элемента есть данный класс, то убирает его; в противном случае добавляет. Второй параметр ( flag ) необязательный. По умолчанию он имеет значение undefined . Если ему установить значение true или false , то он будет работать как метод add или remove , т.е. либо добавлять класс к элементу, либо удалять его у него.

Пример, в котором показано как можно выполнять различные действия, связанные с классами элемента с использованием методов classList :

// получим элемент c const sideBar = document.querySelector('#sidebar'); // переключим класс hidden-xs у элемента, т.е. если он есть он у элемента, то удалим его; а если данного класса нет, то добавим его к нему sideBar.classList.toogle('hidden-xs'); // добавим три дополнительных класса sideBar.classList.add('col-xs-6', 'col-sm-4', 'col-md-3'); // удалим класс hidden-xs sideBar.classList.remove('hidden-xs'); // проверим есть ли класс hidden-lg у элемента и если есть, то добавим к нему ещё один hidden-md if (sideBar.classList.contains('hidden-lg')) { sideBar.classList.add('hidden-md'); }

Объект classList является псевдомассивом, т.е. его можно перебрать как массив.

Пример, в котором переберём все классы classList :

.

Свойство classList поддерживается всеми современными браузерами. Если нужна поддержка совсем старых браузеров (например, Internet Explorer 8, 9), то в этом случае можно воспользоваться каким-нибудь полифиллом.

Стили элемента

В DOM у каждого элемента есть свойство style , с помощью которого мы можем управлять его стилями. Значение данного свойства — это объект, который доступен только для чтения. Установка стилей элементу в этом случае осуществляется посредством добавления к нему соответствующих свойств.

Пример, как можно к элементу добавить стили через DOM-свойство style :

Квадрат

Имена свойств объекта style обычно совпадают с названиями CSS-свойств. Исключение составляют только те CSS-свойства, в которых используется дефис. Например, background-color . В этом случае дефис и следующая за ним буква заменяется на прописную. Например, CSS-свойство background-color для объекта style будет указывать как backgroundColor . А, например, CSS-свойство с браузерным префиксом -webkit-border-radius - как WebkitBorderRadius .

Удаление стилей

Например, установим body некоторый цвет фона:

document.body.style.backgroundColor = '#eee';

Если теперь данный стиль нужно убрать, то чтобы это выполнить мы должны просто присвоить ему пустую строку:

document.body.style.backgroundColor = '';

Примеры использования DOM-свойства style для установки стилей элементам.

.

.

.

Свойство cssText

Кроме индивидуального установления стилей элементу мы можем установить их сразу с помощью специального свойства style.cssText . Осуществляется это посредством присваивания этому свойству строки, состоящей из набора стилей, разделённых между собой с помощью точки с запятой. Т.е. выполняется это аналогично тому, как мы устанавливаем стили в HTML-атрибуте style .

Пример, в котором установим стили "font-size:40px; color:blue;" элементам с классом intro :

.

При установке стилей с помощью свойства style.cssText нужно быть осторожным. Эти связано с тем, что при установке это свойство удаляет все стили, которые есть у элемента. Т.е. те, которые мы установили ему с помощью атрибута style и в соответствующем ему DOM-свойстве.

Выполнить операцию, аналогичную той которую выполняет свойство style.cssText , можно ещё через метод setAttribute .

.

Задания

1. Написать скрипт, используя classList , для установления элементу с классом text трех классов: size-40 , color-red и bg-yellow :

   

Некоторый текст.

2. Написать код для установления стиля "width: 180px; height: 180px;" всем элементам на странице с классом, начинающимся со слов block- .

Как изменить класс элемента с помощью JavaScript?

«Атрибут class в основном используется для указания на класс в таблице стилей. Однако он также может использоваться JavaScript (через HTML DOM) для внесения изменений в элементы HTML с указанным классом». - w3schools.com/tags/att_standard_class.asp

Triynko 07 апр. 2011, в 18:11

element.setAttribute(name, value); Замените name на class . Замените value тем именем, которое вы дали классу, заключенным в кавычки. Это позволяет избежать необходимости удалять текущий класс и добавлять другой. Этот пример jsFiddle показывает полный рабочий код.

Alan Wells 18 май 2014, в 04:59

Для изменения класса элемента HTML с помощью onClick используйте этот код: и в разделе javascript: function addNewClass(elem) < elem.className="newClass"; >Онлайн

Iman Bahrampour 22 авг. 2017, в 04:13

@Triynko - эта ссылка на w3schools изменилась, похоже, в сентябре 2012 года. Вот эта страница на Archive.org от 12 сентября 2012 года: HTML-класс Attribute-w3schools . Вот ссылка на страницу замены на w3schools.com: HTML-класс Attribute-w3schools .

Kevin Fegan 12 окт. 2018, в 17:46
Показать ещё 2 комментария
Поделиться:

32 ответа

Лучший ответ

Современные методы HTML5 для изменения классов

Современные браузеры добавили classList, который предоставляет методы, облегчающие манипулирование классами без необходимости в библиотеке:

document.getElementById("MyElement").classList.add('MyClass'); document.getElementById("MyElement").classList.remove('MyClass'); if ( document.getElementById("MyElement").classList.contains('MyClass') ) document.getElementById("MyElement").classList.toggle('MyClass'); 

К сожалению, они не работают в Internet Explorer до v10, хотя есть прокладка, чтобы добавить поддержку для него в IE8 и IE9, доступной от этой страницы. Это, тем не менее, все больше и больше поддерживается.

Простое кросс-браузерное решение

Стандартный метод JavaScript для выбора элемента использует document.getElementById("Id") , что и используется в следующих примерах: вы можете, конечно, получать элементы по-другому, и в правильной ситуации может просто использовать this вместо этого, вдаваясь в подробности, это выходит за рамки ответа.

Чтобы изменить все классы для элемента:

Чтобы заменить все существующие классы одним или несколькими новыми классами, задайте атрибут className:

document.getElementById("MyElement").className = "MyClass"; 

(Вы можете использовать список с разделителями пробелов для применения нескольких классов.)

Чтобы добавить дополнительный класс к элементу:

Чтобы добавить класс к элементу, не удаляя/не влияя на существующие значения, добавьте пробел и новое имя класса, например:

document.getElementById("MyElement").className += " MyClass"; 

Чтобы удалить класс из элемента:

Чтобы удалить один класс для элемента, не затрагивая другие потенциальные классы, требуется простая замена регулярного выражения:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' ) /* Code wrapped for readability - above is all one statement */ 

Объяснение этого регулярного выражения выглядит следующим образом:

(?:^|\s) # Match the start of the string, or any single whitespace character MyClass # The literal text for the classname to remove (?!\S) # Negative lookahead to verify the above is the whole classname # Ensures there is no non-space character following # (i.e. must be end of string or a space) 

Флаг g сообщает, что замена повторяется по мере необходимости, если имя класса добавлено несколько раз.

Чтобы проверить, уже ли класс применяется к элементу:

Такое же регулярное выражение, используемое выше для удаления класса, также может использоваться в качестве проверки того, существует ли конкретный класс:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) ) 

Присвоение этих действий событиям onclick:

Хотя можно писать JavaScript непосредственно внутри атрибутов событий HTML (например, onclick="this.className+=' MyClass'" ), это поведение не рекомендуется. В более крупных приложениях более удобный код достигается путем разделения HTML-разметки на логику взаимодействия JavaScript.

Первым шагом к достижению этого является создание функции и вызов функции в атрибуте onclick, например:

  .  

(Не требуется иметь этот код в тегах скриптов, это просто для краткости примера, и в том числе JavaScript в отдельном файле может быть более подходящим.)

Второй шаг - переместить событие onclick из HTML и в JavaScript, например, с помощью addEventListener

 function changeClass() < // Code examples from above >window.onload = function() .  

(Обратите внимание, что часть window.onload требуется, чтобы содержимое этой функции выполнялось после завершения загрузки HTML - без этого, MyElement может не существовать при вызове кода JavaScript, чтобы строка не удалась.)

Структуры JavaScript и библиотеки

Вышеприведенный код находится в стандартном JavaScript, однако распространенной практикой является использование инфраструктуры или библиотеки для упрощения общих задач, а также использование исправленных ошибок и крайних случаев, которые вы, возможно, не придумали при написании кода.

В то время как некоторые люди считают излишним добавить среду размером 50 КБ для простого изменения класса, если вы выполняете какую-либо значительную работу JavaScript или что-то, что может иметь необычное поведение в кросс-браузере, стоит рассмотреть.

(Очень грубо, библиотека представляет собой набор инструментов, предназначенных для конкретной задачи, в то время как структура обычно содержит несколько библиотек и выполняет полный набор обязанностей.)

Приведенные выше примеры были воспроизведены ниже, используя jQuery, возможно, наиболее часто используемую библиотеку JavaScript (хотя есть и другие, заслуживающие изучения).

(Обратите внимание, что $ здесь является объектом jQuery.)

Изменение классов с помощью jQuery:

$('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') ) 

Кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаление класса, который делает:

$('#MyElement').toggleClass('MyClass'); 

Назначение функции событию клика с помощью jQuery:

$('#MyElement').click(changeClass); 

или, не требуя идентификатора:

$(':button:contains(My Button)').click(changeClass); 

Peter Boughton 12 окт. 2008, в 22:27
Поделиться

Отличный ответ Питер. Один вопрос . почему лучше делать с JQuery, чем с Javascript? JQuery - это здорово, но если это все, что вам нужно сделать - что оправдывает включение всего массива JQuery вместо нескольких строк JavaScript?

mattstuehler 15 май 2011, в 15:32

@mattstuehler 1) фраза «еще лучше х» часто означает «еще лучше (вы можете) х». 2) Чтобы понять суть дела, jQuery разработан для помощи в доступе к DOM и манипулировании им, и очень часто, если вам нужно делать подобные вещи, когда вам придется делать это повсеместно.

Barry 24 май 2011, в 16:46

Имейте в виду, что в случае добавления имени класса перед именем класса, которое вы хотите добавить, ДОЛЖНО быть пустое пространство.

didxga 13 июль 2011, в 07:07
если вы добавляете класс, удаляется ли предыдущий класс, или вам придется делать это вручную?
Gabor Magyar 27 июль 2011, в 19:22

Предыдущие занятия останутся. Вам придется удалить другие классы вручную, если вы хотите это сделать.

Micharch54 03 авг. 2011, в 19:15

Одна ошибка в этом решении: когда вы нажимаете на кнопку несколько раз, она добавляет класс «MyClass» к элементу несколько раз, а не проверяет, существует ли он уже. Таким образом, вы можете получить атрибут класса HTML, который выглядит примерно так: class="button MyClass MyClass MyClass"

Web_Designer 13 сен. 2011, в 16:28

Я думаю, что решение этого было бы: if ( ! document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) ) или с помощью jQuery: if ( ! $j('#MyElement').hasClass('MyClass') ) (хотя я подозреваю, что addClass не будет добавлять дубликаты?)

Peter Boughton 14 сен. 2011, в 00:14

Если вы пытаетесь удалить класс «myClass» и у вас есть класс «prefix-myClass», то регулярное выражение, которое вы указали выше для удаления класса, оставит вас с «prefix-» в вашем className: O

jinglesthula 15 сен. 2011, в 05:26

Вау, три года и 183 возражения, и никто не заметил этого до сих пор. Благодаря jinglesthula, я исправил регулярное выражение, чтобы оно не могло некорректно удалять части имен классов. // Полагаю, это хороший пример того, почему стоит использовать Framework (например, jQuery) - подобные ошибки быстрее обнаруживаются и исправляются и не требуют изменений в обычном коде.

Peter Boughton 15 сен. 2011, в 17:09

Я сделал несколько небольших правок, чтобы улучшить ответ - надеюсь, люди согласятся, что они улучшения? Если есть что-то еще, что я пропустил, дайте мне знать (или просто отредактируйте ответ самостоятельно).

Peter Boughton 15 сен. 2011, в 17:24

@PeterBoughton Не уверен, если вы считаете, что это улучшение, но мне нравится: (' '+document.getElementById("MyElement").className+' ').replace( ' '+MyClass+' ' , '' )

Paulpro 21 дек. 2011, в 09:38

@ PaulP.RO вы сворачиваете окружающие пробелы и регулярное выражение в ноль, что объединит строки имен окружающих классов (если таковые имеются) вместе. Я думаю, что elem.className = elem.className.replace ('+ classname +' ',' ') - это то, что мы хотим. Спасибо!

Cris Stringfellow 04 июнь 2012, в 10:40

Я использую аналогичные методы, но с регулярным выражением ag (general). причина как раз и заключается в проблеме, описанной @Web_Designer выше: если пользователь щелкает несколько раз, вы получаете несколько экземпляров одного и того же класса, и все экземпляры должны быть удалены для удаления класса.

Christophe 15 авг. 2012, в 00:06

Импорт целой библиотеки для выполнения одной простой задачи - это именно то, почему в Интернете так много дрейфа. Поэтому я не согласен с тем, что использование JQuery является «лучшим» решением.

b1nary.atr0phy 03 окт. 2012, в 01:01

Я только что сделал существенные дополнения к этому ответу - основная масса такая же, но я был бы признателен за отзыв о том, есть ли ошибки или места для дальнейшего улучшения.

Peter Boughton 12 дек. 2012, в 18:24

При создании регулярного выражения с переменной для имени класса мне пришлось искать синтаксис: var regExp = new RegExp('(?:^|\\s)' + classToAddOrRemove + '(?!\\S)', 'g');

Sprockincat 30 янв. 2013, в 16:44

Здесь не хватает одной важной детали - различия между фреймворком и библиотекой. jQuery - это библиотека, а не фреймворк. Просто для безопасности примера, например, фреймворк будет angularJs.

brunoais 08 апр. 2013, в 07:23

(Вы можете указать разделенный пробелами список элементов.) Вы должны иметь в виду список классов для назначения, а не элементы для выбора.

DrJonOsterman 02 авг. 2013, в 21:23

Действительно отличный ответ, который полностью не отвечает на вопрос ОП: как вы меняете значение существующего класса?

Peter Flynn 06 янв. 2014, в 10:13

Если он не отвечает на вопрос ОП, почему они отметили это как решение? Ваш вопрос, кажется, другой (возможно, вы хотите изменить свойства / объявления CSS, связанные с именем класса? Не уверен, что браузеры позволяют это) - почему бы не уточнить, что вам нужно, в новом вопросе, который объясняет, что именно вы хотите / пытаетесь добиться?

Peter Boughton 06 янв. 2014, в 16:37

Что касается точки «Добавить дополнительный класс к элементу» (2-й в списке), я считаю, что лучше всего взять текущий el.className , строку concat с " class-to-add" и, наконец, вызвать .trim() в строке перед обновлением целевого элемента. Тем не менее, я не думаю, что CSS действительно заботится о \s , отдельные классы элемента в любом случае определяются разделенным пробелами списком.

ZaLiTHkA 22 янв. 2015, в 09:26

хех: var a=[];e.className=((a=e.className.split(" ")).splice(a.indexOf(oldClass),1,newClass)&&a).join(" ").trim(); : D

Duncan 06 март 2015, в 19:04

Можете ли вы переставить вещи? По моему мнению classList с шимом для поддержки браузера должен быть наверху.

Marcel Burkhard 02 июнь 2015, в 13:04

было бы здорово, если бы что-то вроде этого работало тоже, чтобы удалить имя класса: document.getElementById("MyElement").className -= " MyClass";

Nick Humphrey 29 июль 2015, в 08:53
поэтому ответом будет просто $ ('# MyElement'). toggleClass ('MyClass'); спасибо, у меня работает
shady sherif 05 окт. 2015, в 14:15

Привет. Мне было интересно, что вы скажете об использовании границ слов вместо (?: \ S) в начале и (?! \ S) в конце вашего регулярного выражения. Комментарии? document.getElementById("MyElement").className.replace( /\bMyClass\b/g , '' ) . Кажется, у меня никогда не было причин использовать множество сокращений для регулярных выражений, но кажется, что это тоже может сработать. Хотя \ b имеет ограничения на то, что он считает символом слова, и вы никогда не знаете, что кто-то может использовать в качестве имени класса.

Anthony Rutledge 07 нояб. 2015, в 09:57
\ b совпадает с дефисом
Peter Boughton 07 нояб. 2015, в 14:23

Существуют более быстрые методы, чем удаление класса с использованием RegExp, особенно если вы собираетесь превратить его в полизаполнение. См. Jsperf.com/removeclass-methods

thdoan 24 нояб. 2015, в 08:48

Код в « Чтобы удалить класс из элемента»: и « Проверить», если класс уже применен к элементу: разделы отсутствуют ; с конца строки. Для этого есть причина? Было бы также неплохо, если бы в разделе «Удалить класс из элемента» была заметка, указывающая, что происходит с пробелами. В противном случае это очень хороший ответ.

Trisped 21 март 2016, в 18:38

Я бы предпочел (^start(\s+start)*\s*)|((?:\s+)start(?!\S+)) удалить слово start из списка, разделенного пробелами.

Andreas Dyballa 24 май 2016, в 12:18

Angular: angular.element (document.getElementById ("MyElement")). RemoveClass ("имя-класса"); angular.element (document.getElementById ( "MyElement")). addClass ( "имя-класса")

Zymotik 02 июнь 2016, в 13:59

Привет, это очень хороший ответ. Я хочу изменить класс при некоторых условиях при загрузке html, а не о событии нажатия кнопки. пожалуйста, обратитесь к этому вопросу: stackoverflow.com/questions/38028756/…

pankaj 25 июнь 2016, в 14:13

Ваш метод удаления класса почти позаботится об удалении лишних пробелов, которые могут появиться после удаления элементов. Но может случиться так, что результат начнется с пробела. Если вы добавите .trim (), ваш метод удаления класса не будет содержать лишних пробелов.

rosell.dk 17 окт. 2016, в 20:42

Кроме того, вы можете безопасно удалить «?:» В начале RegEx так, чтобы он читал: new RegExp («(\\ s | ^)« + className + »(?! \\ S) », "г")

rosell.dk 17 окт. 2016, в 20:45

Я создал обширный тест альтернатив для удаления имени класса. Ваше решение в тесте. Тест доступен здесь

rosell.dk 17 окт. 2016, в 20:48

@Zymotik Вы можете добавить другой отдельный ответ вместо редактирования чужого ответа. Это полезный фрагмент, но это должен быть собственный ответ.

TankorSmash 01 март 2017, в 17:32
Я использую github.com/toddmotto/apollo
Fahmi 16 март 2017, в 10:20

@PoornaSenaniGamage - Ваше редактирование говорит, что причиной было «улучшенное форматирование», интересно, как вы могли бы считать это «улучшением»? Это было хорошо до вашего редактирования, и хорошо, это просто "хорошо" после вашего редактирования. Вы просто заменили один стандартный метод форматирования кода, который предпочитает (ну, по крайней мере, выбрал) первоначальный автор, на другой стандартный метод форматирования кода, который вы предпочитаете. То, что ваше редактирование было одобрено, для меня загадка, так как мне кажется, что это неуместное изменение. Договорились, что это не крайне значимый вопрос. Кто-то еще, пожалуйста, дайте мне знать, если я вне линии.

Kevin Fegan 12 окт. 2018, в 19:27
Показать ещё 36 комментариев

Вы также можете просто сделать:

document.getElementById('id').classList.add('class'); document.getElementById('id').classList.remove('class');

И для переключения класса (удалите, если существует еще его добавить):

document.getElementById('id').classList.toggle('class');

Tyilo 05 авг. 2011, в 19:29
Поделиться
Я считаю, что это зависит от HTML5.
John 27 окт. 2011, в 17:16
Вам понадобится classList Eli Grey's classList .
ELLIOTTCABLE 14 нояб. 2011, в 14:34
Стоит отметить, что это не работает в версиях IE менее 8 ..
Lloyd 24 янв. 2012, в 10:24

Mozilla Developer Network заявляет, что изначально не работает в Internet Explorer меньше 10. Я считаю, что это утверждение соответствует действительности в моем тестировании. По-видимому, для Internet Explorer 8-9 требуется прокладка Eli Grey . К сожалению, я не смог найти его на своем сайте (даже с поиском). Подкладка доступна по ссылке Mozilla.

doubleJ 29 окт. 2012, в 04:13
Функция не поддерживается несколько часов назад (добавлена в IE10 и Android 3)
andreszs 02 авг. 2014, в 23:13
Ajedi32 15 июнь 2015, в 15:56

atow "classList" частично поддерживается в IE10 +; нет поддержки Opera Mini; еще полная поддержка в остальных стандартных браузерах: caniuse.com/#search=classlist

Nick Humphrey 29 июль 2015, в 08:47
Я думаю, что подкладка Eli Grey можно найти здесь .
Wilf 06 сен. 2015, в 16:54
я люблю, как мало ты заставил меня читать
Squirrl 27 март 2016, в 18:43
Показать ещё 7 комментариев

В одном из моих старых проектов, которые не использовали jQuery, я создал следующие функции для добавления, удаления и проверки, если элемент имеет класс:

function hasClass(ele, cls) < return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); >function addClass(ele, cls) < if (!hasClass(ele, cls)) ele.className += " " + cls; >function removeClass(ele, cls) < if (hasClass(ele, cls)) < var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); ele.className = ele.className.replace(reg, ' '); >> 

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

  .  

Теперь наверняка было бы лучше использовать jQuery.

Andrew Orsich 28 май 2011, в 08:13
Поделиться

Это отлично подходит для случаев, когда ваш клиент не позволяет вам использовать jQuery. (Потому что вы в конечном итоге почти построили свою собственную библиотеку.)

Mike 24 июль 2013, в 05:16

@Mike Если клиент не позволяет вам использовать jQuery, не могли бы вы просто пройтись и перестроить только те функции, которые вам нужны, в вашу собственную библиотеку?

kfrncs 18 нояб. 2013, в 05:04

@kfrncs Потому что мне вообще не нужен такой большой фреймворк. Для проекта, о котором я думал, единственными необходимыми мне функциями были 3 функции имени класса (has, add, remove) и функции cookie (has, add, remove). Все остальное было либо на заказ, либо изначально хорошо поддерживалось. Таким образом, все вместе было всего 150 строк до минимизации, включая комментарии.

Mike 18 нояб. 2013, в 19:17

Чувак, его 4 утра и большое спасибо. Vanilla JS - это то, что мы используем в моем проекте, и это спасло жизнь.

LessQuesar 16 дек. 2015, в 09:25

Это мое любимое решение для этого. Я использую это везде. Я считаю, что это самый элегантный способ добавления и удаления классов, когда в вашем проекте еще нет другого способа сделать это.

WebWanderer 17 окт. 2017, в 21:36

Следует отметить, что после использования addClass и removeClass addClass и того же элемента, className элемента будет содержать дополнительный пробел. Модифицирующая строка removeClass объекта removeClass должна быть обновлена до ele.className = ele.className.replace(reg, ' ').trim().replace(/\s<2,>/g, ' '); , Это удаляет конечные пробелы, оставшиеся после, и объединяет несколько пробелов в один пробел в className.

WebWanderer 17 окт. 2017, в 21:45
Показать ещё 4 комментария

Вы можете использовать node.className так:

document.getElementById('foo').className = 'bar'; 

Это должно работать в IE5.5 и выше в соответствии с PPK.

Eric Wendelin 12 окт. 2008, в 21:00
Поделиться
это переписало бы все остальные классы объекта . так что это не так просто.
Eric Sebasta 09 окт. 2015, в 20:33

Ух ты, удивленный, здесь так много ответов о переполнении.

Travis J 05 янв. 2012, в 20:13
Поделиться
да, но ненавязчивый javascript - лучшая практика
Lloyd 24 янв. 2012, в 10:27
Я бы сказал, ненавязчивый javascript - ужасная практика для написания примера кода .
Gabe 13 апр. 2012, в 14:50
Я бы не согласился, потому что я думаю, что пример кода должен служить хорошим примером.
thomasrutter 29 март 2015, в 23:36

Хороший пример должен наставлять и зажигать воображение одновременно. Это не должно заменять мысль, но вдохновлять ее.

Anthony Rutledge 31 окт. 2015, в 04:01
Другие ответы не являются чрезмерными, они также сохраняют существующие классы на элементе.
gcampbell 04 июнь 2016, в 15:04
Показать ещё 3 комментария

Использование чистого кода JavaScript:

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; >function removeClass(ele, cls) < if (hasClass(ele, cls)) < var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); ele.className = ele.className.replace(reg, ' '); >> function replaceClass(ele, oldClass, newClass) < if(hasClass(ele, oldClass))< removeClass(ele, oldClass); addClass(ele, newClass); >return; > function toggleClass(ele, cls1, cls2)< if(hasClass(ele, cls1))< replaceClass(ele, cls1, cls2); >else if(hasClass(ele, cls2))< replaceClass(ele, cls2, cls1); >else < addClass(ele, cls1); >> 

PseudoNinja 20 сен. 2011, в 16:02
Поделиться
так же, как здесь: snipplr.com/view/3561/addclass-removeclass-hasclass
Jaider 20 апр. 2012, в 20:40

Это работает для меня:

function setCSS(eleID)

Gopal Krishna Ranjan 08 дек. 2011, в 10:14
Поделиться

Отличный ответ! Осталось добавить: установить для каждого CSS-имени класса селектор, чтобы указать стиль для группы элементов класса.

Roman Polen. 08 май 2012, в 11:19

Это работает для меня на FF, но когда я попытался использовать el.className = "newStyle"; это не сработало, почему?

Lukasz 'Severiaan' Grela 19 июль 2012, в 12:29

Вы можете использовать el.setAttribute('class', newClass) или лучше el.className = newClass . Но не el.setAttribute('className', newClass) .

Oriol 11 фев. 2015, в 15:54
Показать ещё 1 комментарий

Также вы можете расширить объект HTMLElement, чтобы добавить методы для добавления, удаления, переключения и проверки классов (gist):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element; HTMLElement.prototype.addClass = function(string) < if (!(string instanceof Array)) < string = string.split(' '); >for(var i = 0, len = string.length; i < len; ++i) < if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) < this.className = this.className.trim() + ' ' + string[i]; >> > HTMLElement.prototype.removeClass = function(string) < if (!(string instanceof Array)) < string = string.split(' '); >for(var i = 0, len = string.length; i < len; ++i) < this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim(); >> HTMLElement.prototype.toggleClass = function(string) < if (string) < if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) < this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim(); >else < this.className = this.className.trim() + ' ' + string; >> > HTMLElement.prototype.hasClass = function(string)

И тогда просто используйте вот так (по щелчку добавит или удалит класс):

document.getElementById('yourElementId').onclick = function()

moka 11 апр. 2013, в 10:33
Поделиться
это немного многословно . вот очень краткое решение . jsfiddle.net/jdniki/UaT3P
zero_cool 18 авг. 2014, в 19:28

Извините @Jackson_Sandland, но вы полностью упустили из виду то, что вообще не нужно использовать jQuery.

moka 21 авг. 2014, в 08:36

Чтобы добавить информацию из другой популярной структуры, Google Closures, см. класс dom/classes:

goog.dom.classes.add(element, var_args) goog.dom.classes.addRemove(element, classesToRemove, classesToAdd) goog.dom.classes.remove(element, var_args) 

Один из вариантов выбора элемента - goog.dom.query с селектором CSS3:

var myElement = goog.dom.query("#MyElement")[0]; 

Ben Flynn 26 нояб. 2011, в 21:59
Поделиться

Несколько небольших заметок и настроек по предыдущим регулярным выражениям:

Вы хотите сделать это глобально, если список классов имеет имя класса более одного раза. И вы, вероятно, захотите снять пробелы с концов списка классов и преобразовать несколько пробелов в одно пространство, чтобы не допустить пробелов. Ни одна из этих проблем не должна быть проблемой, если только один код, совпадающий с именами классов, использует регулярное выражение ниже и удаляет имя перед его добавлением. Но. Ну, кто знает, кто может смириться с списком имен классов.

Это регулярное выражение нечувствительно к регистру, так что ошибки в именах классов могут отображаться до того, как код будет использоваться в браузере, который не заботится о случае в именах классов.

var s = "testing one four one two"; var cls = "one"; var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig'); alert("[" + s.replace(rg, ' ') + "]"); var cls = "test"; var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig'); alert("[" + s.replace(rg, ' ') + "]"); var cls = "testing"; var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig'); alert("[" + s.replace(rg, ' ') + "]"); var cls = "tWo"; var rg = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig'); alert("[" + s.replace(rg, ' ') + "]"); 

Alex Robinson 02 май 2012, в 05:15
Поделиться

Измените класс CSS класса с помощью JavaScript в ASP.NET:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'") lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'") lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'") lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'") End If End Sub 

Hiren Kansara 28 май 2011, в 07:59
Поделиться

Я бы использовал jQuery и написал что-то вроде этого:

jQuery(function($) < $("#some-element").click(function() < $(this).toggleClass("clicked"); >); >); 

Этот код добавляет функцию, вызываемую при нажатии элемента id some-element. Функция добавляет щелчок к атрибуту класса элемента, если он еще не является частью его, и удаляет его, если он там.

Да, вам нужно добавить ссылку на библиотеку jQuery на своей странице, чтобы использовать этот код, но по крайней мере вы можете быть уверены, что большинство функций в библиотеке будут работать практически во всех современных браузерах, и это сэкономит вы время внедряете свой собственный код, чтобы сделать то же самое.

shingokko 05 май 2012, в 03:50
Поделиться

Вы должны написать jQuery только один раз. jQuery(function($) < >); делает $ доступным внутри функции во всех случаях.

ThiefMaster 13 июнь 2012, в 14:38

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','') 
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/',''); 

Eric Bailey 08 дек. 2009, в 22:49
Поделиться

Неправильно. RegEx ограничен косыми чертами. Добавление кавычек приводит к сбою в IE, возвращая строку класса, который вы пытаетесь удалить, а не фактически удаляя класс.

Dylan 14 авг. 2011, в 21:46

Здесь toggleClass toggle/add/remove класс для элемента:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass function toggleClass(elem, theClass, newState) < var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g'); var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null)); elem.className=elem.className.replace(matchRegExp, ''); // clear all if (add) elem.className += ' ' + theClass; > 

также см. мой ответ здесь для динамического создания нового класса

kofifus 28 окт. 2015, в 07:30
Поделиться

Здесь моя версия, полностью работающая:

function addHTMLClass(item, classname) < var obj = item if (typeof item=="string") < obj = document.getElementById(item) >obj.className += " " + classname > function removeHTMLClass(item, classname) < var obj = item if (typeof item=="string") < obj = document.getElementById(item) >var classes = ""+obj.className while (classes.indexOf(classname)>-1) < classes = classes.replace (classname, "") >obj.className = classes > 

alfred 17 окт. 2012, в 12:36
Поделиться

Это нарушит класс foobar если вы попытаетесь удалить класс foo . JS в атрибутах встроенного обработчика событий был нарушен перед редактированием. 4-летний принятый ответ намного лучше.

Quentin 17 окт. 2012, в 12:25

спасибо, я исправил это (не проблема префикса). это старый принятый ответ, в котором есть ошибка с регулярным выражением.

alfred 17 окт. 2012, в 12:27
В коде все еще есть проблема с foobar . Смотрите тест здесь
rosell.dk 17 окт. 2016, в 12:11
Показать ещё 1 комментарий

Изменить класс элемента в ванильном JavaScript с поддержкой IE6

Вы можете попробовать использовать свойство node attributes , чтобы поддерживать совместимость со старыми браузерами даже в IE6:

function getClassNode(element) < for (var i = element.attributes.length; i--;) if (element.attributes[i].nodeName === 'class') return element.attributes[i]; >function removeClass(classNode, className) < var index, classList = classNode.value.split(' '); if ((index = classList.indexOf(className)) >-1) < classList.splice(index, 1); classNode.value = classList.join(' '); >> function hasClass(classNode, className) < return classNode.value.indexOf(className) >-1; > function addClass(classNode, className) < if (!hasClass(classNode, className)) classNode.value += ' ' + className; >document.getElementById('message').addEventListener('click', function() < var classNode = getClassNode(this); var className = hasClass(classNode, 'red') && 'blue' || 'red'; removeClass(classNode, 'red'); removeClass(classNode, 'blue'); addClass(classNode, className); >)
.red < color: red; >.red:before < content: 'I am red! '; >.red:after < content: ' again'; >.blue < color: blue; >.blue:before
Click me

Eugene Tiurin 04 нояб. 2015, в 17:57
Поделиться

Я использую следующие ванильные функции JavaScript в своем коде. Они используют регулярные выражения и indexOf но не требуют цитирования специальных символов в регулярных выражениях.

function addClass(el, cn) < var c0 = (" " + el.className + " ").replace(/\s+/g, " "), c1 = (" " + cn + " ").replace(/\s+/g, " "); if (c0.indexOf(c1) < 0) < el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, ""); >> function delClass(el, cn) < var c0 = (" " + el.className + " ").replace(/\s+/g, " "), c1 = (" " + cn + " ").replace(/\s+/g, " "); if (c0.indexOf(c1) >= 0) < el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, ""); >> 

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

Salman A 18 янв. 2014, в 10:22
Поделиться

Это можно сделать.

.red a < color:red; >.black a
function changeClass()

Fahad Uddin 03 июль 2016, в 15:38
Поделиться

Если вы хотите удалить класс, вы можете сделать:

ELEMENT.classList.remove("CLASS_NAME"); 

Чтобы добавить класс:

ELEMENT.classList.add('CLASS_NAME'); 

ferralucho 14 нояб. 2017, в 01:21
Поделиться

При нажатии кнопки вы можете попробовать:

заменить (oldClass, newClass)
Заменяет существующий класс новым классом.

var myDiv = document.getElementById('myElement'); myDiv.classList.contains('myCssClass'); myDiv.classList.replace("myCssClass", "myCssClass_new"); 

Kurkula 27 нояб. 2017, в 19:19
Поделиться

После длительного поиска я нашел лучшее решение для управления классами без document.getElementById()

var els = [].slice.apply(document.getElementsByClassName("no-js")); for (var i = 0; i < els.length; i++) < els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js"); >

eapo 09 дек. 2016, в 23:56
Поделиться

Это хорошо, что я нашел полезным.

function classChangeFn() < document.getElementById("MyElement").className = ""; >window.onload = function()

Mohammed Javed 11 апр. 2016, в 12:26
Поделиться

Да, есть много способов сделать это. В синтаксисе ES6 мы можем легко достичь. Используйте этот код для переключения добавить и удалить класс.

const tabs=document.querySelectorAll('.menu li'); for(let tab of tabs) < tab.onclick=function()< let activetab=document.querySelectorAll('li.active'); activetab[0].classList.remove('active') tab.classList.add('active'); >>
body < padding:20px; font-family:sans-serif; >ul < margin:20px 0; list-style:none; >li < background:#dfdfdf; padding:10px; margin:6px 0; cursor:pointer; >li.active

Danish Khan 06 фев. 2019, в 14:28
Поделиться

API classList DOM:

Очень удобным способом добавления и удаления классов является DOM API classList . Этот API позволяет нам выбирать все классы определенного элемента DOM, чтобы изменить список, используя javascript. Например:

const el = document.getElementById("main"); console.log(el.classList);

В журнале мы можем наблюдать, что мы получаем объект не только с классами элемента, но также со многими вспомогательными методами и свойствами. Этот объект наследует от интерфейса DOMTokenList, интерфейса, который используется в DOM для представления набора разделенных пробелами токенов (например, классов).

Пример:

const el = document.getElementById('container'); function addClass () < el.classList.add('newclass'); >function replaceClass () < el.classList.replace('foo', 'newFoo'); >function removeClass ()
button < margin: 20px; >.foo < color: red; >.newFoo < color: blue; >.bar < background-color:powderblue; >.newclass
 
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas

Willem van der Veen 21 сен. 2018, в 10:44
Поделиться

Рассмотрим кнопку, которая будет элементом html. Пусть класс удален, чтобы быть button1, и добавляемый класс - button2, а id - кнопка.

function ClassChange ()

user8158111 20 фев. 2018, в 18:26
Поделиться

ОК, я думаю, что в этом случае вы должны использовать jQuery или написать свои собственные методы в чистом javascript, но я предпочитаю добавлять свои собственные методы, а не вводить все jQuery в мое приложение, если мне это не нужно по другим причинам.

Я хотел бы сделать что-то вроде ниже в качестве методов для моей инфраструктуры javascript, чтобы добавить несколько функциональных возможностей, которые обрабатывают добавление классов, удаление классов и т.д., аналогично jQuery, это полностью поддерживается в IE9 +, также мой код написан на ES6, поэтому вам нужно убедиться, что ваш браузер поддерживает его или вы используете что-то вроде babel, иначе вам нужно использовать синтаксис ES5 в вашем коде, также таким образом, мы находим элемент через идентификатор, что означает, что элементу должен быть выбран идентификатор

//simple javascript utils for class management in ES6 var classUtil = < addClass: (id, cl) =>< document.getElementById(id).classList.add(cl); >, removeClass: (id, cl) => < document.getElementById(id).classList.remove(cl); >, hasClass: (id, cl) => < return document.getElementById(id).classList.contains(cl); >, toggleClass: (id, cl) => < document.getElementById(id).classList.toggle(cl); >> 

и вы можете просто вызвать их использование, как показано ниже, представьте, что ваш элемент имеет идентификатор "id" и класс "class", убедитесь, что вы передаете их как строку, вы можете использовать утилиту, как показано ниже:

classUtil.addClass('myId', 'myClass'); classUtil.removeClass('myId', 'myClass'); classUtil.hasClass('myId', 'myClass'); classUtil.toggleClass('myId', 'myClass'); 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *