W3.JS Добавление классов в HTML


Добавьте класс:

w3.addClass(selector,'class')

Добавьте несколько классов:

w3.addClass(selector,'class1 class2 class3...')

Добавить класс по идентификатору

Добавьте «отмеченный» класс к элементу с id="London":

Пример

<button onclick="w3.addClass('#London','marked')">Add Class</button>


Добавить класс по тегу

Добавьте «отмеченный» класс ко всем элементам <h2>:

Пример

<button onclick="w3.addClass('h2','marked')">Add Class</button>


Добавить класс за классом

Добавьте «отмеченный» класс к элементам с class="city":

Пример

<button onclick="w3.addClass('.city','marked')">Add Class</button>


Добавить несколько классов

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

Добавьте «класс1» и «класс2» к элементу с id="London":

Пример

<button onclick="w3.addClass('#London','class1 class2')">Add Classes</button>

Удалить классы из элементов HTML

Удалить класс:

w3.removeClass(selector,'class')

Удалить несколько классов:

w3.removeClass(selector,'class1 class2 class3...')

Удалить класс по идентификатору

Удалить «отмеченный» класс из элемента с id="London":

Пример

<button onclick="w3.removeClass('#London','marked')">Remove Class</button>


Удалить класс по тегу

Удалите «отмеченный» класс из всех элементов <h2>:

Пример

<button onclick="w3.removeClass('h2','marked')">Remove Class</button>


Удалить класс за классом

Удалите "отмеченный" класс из всех элементов с class="city":

Пример

<button onclick="w3.removeClass('.city','marked')">Remove Class</button>


Удалить несколько классов

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

Удалите как «класс1», так и «класс2» из элемента с id="London":

Пример

<button onclick="w3.removeClass('#London','class1 class2')">Remove Classes</button>

Переключить класс элементов HTML

Переключить класс (вкл./выкл.):

w3.toggleClass(selector,'class')

Переключение между двумя классами:

w3.toggleClass(selector,'property','class','class')

Переключить класс по идентификатору

Переключение между «отмеченным» классом элемента с id="London":

Пример

<button onclick="w3.toggleClass('#London','marked')">Toggle</button>


Переключить класс по тегу

Переключение между «отмеченным» классом всех элементов <h2>:

Пример

<button onclick="w3.toggleClass('h2','marked')">Toggle</button>


Переключить класс за классом

Переключайтесь между «отмеченными» классами всех элементов с помощью class="city":

Пример

<button onclick="w3.toggleClass('.city','marked')">Toggle</button>


Переключить несколько классов

Переключение между именем класса «class1» и «class2» для id="London":

Пример

<button onclick="w3.toggleClass('#London','class1','class2')">Toggle</button>