Html css javascript classes

CSS Class Manipulation with Vanilla JavaScript

Today we’ll talk about a basic feature of JavaScript, but one that can be employed to achieve a lot of different effects on your site. One of the goals of this series is to help budding web developers leave jQuery behind. A common task to use jQuery for is CSS class manipulation: adding, removing, toggling, or otherwise switching classes on an HTML element. Doing all these things in vanilla JavaScript is easy! JavaScript has a built in way to handle the classes at Element.classList .

Access Classes on an Element

The classList property on an HTML element provides all we need to count classes on that element, add or remove them, toggle classes on and off, and swap classes for one another. Calling Element.classList will return a read-only list of the element’s class attributes. Like an array, we can count the number of classes present with classList.length .

// First we need to grab an HTML element const myElement = document.getElementById('my-element'); // Then count how many classes attributes it has console.log(myElement.classList.length); 

Add a Class

Though Element.classList is read-only, it still provides several methods that we can use to manipulate its value. We can call .add() to add a class to the element.

// Add a class called 'my-class' to the element myElement.classList.add('my-class'); 

Remove a Class

We can call .remove() to remove a class from the element if it’s present. If the class we name isn’t there, that’s okay.

// Check for a class called 'my-class' and remove it myElement.classList.remove('my-class'); 

Add or Remove Multiple Classes

If we want to add or remove multiple classes as once, we can achieve this in two different ways. If all our class names are individual strings, we can just feed them as arguments into classList.add() or classList.remove() . If are class names are compiled in an array, we can use the spread syntax to pass the array in as a single argument.

// Remove a couple individual classes by name myElement.classList.remove('my-class', 'your-class'); // Alternatively, start with an array of class names const classes = ['her-class', 'his-class', 'their-class']; // Use the spread syntax in this case // To use it, put three periods . before the array name // Now we can add every class in the array to the element myElement.classList.add(. classes); 

Toggle a Class

We can also call .toggle() and name a class to add it if it’s not already on the element, and remove it if it was already on the element.

// Toggle on a class named 'my-class' myElement.classList.toggle('my-class'); // Toggle 'my-class' right off again myElement.classList.toggle('my-class'); 

We can customize classList.toggle() by adding a second argument after the class name. This argument should be a conditional test that will evaluate to either true or false. If the result is true, the designated class will be added; if the result is false, the designated class will be removed.

// Declare an integer to use in our conditional test let myInt = 0; // Toggle class on if the integer is greater than or // equal to 0 myElement.classList.toggle('my-class', myInt >= 0); // We can change our integer to change the result of our // conditional test myInt = -1; // The same toggle line now toggles our class off myElement.classList.toggle('my-class', myInt >= 0); 

Replace One Class with Another

We can choose one class to replace with another class. Just pass the classes as two arguments to classList.replace() . First pass the class to swap out, then pass the class to swap in.

// Replace 'my-class' with 'your-class' myElement.classList.replace('my-class', 'your-class'); 

className

Without a doubt, Element.classList is the best way to add and remove classes from an HTML element. It’s very similar to the approach you’d use to accomplish the same tasks in jQuery, so if you’re leaving behind your jQuery crutches in favor of vanilla JavaScript, this will be an easy transition. Using classList is probably preferable, however there is another way to access the class attributes on an element. You can also achieve this using Element.className . This property will return a string with the names of all classes on the element, separated with spaces. It’s what you’d see if you looked at the element’s HTML: one string—potentially with multiple class names—set to the element’s class attribute.

// Imagine we have this HTML element span id="my-span" class="text-white">Element/span> // We can grab this element in JavaScript const mySpan = document.getElementWithId('my-span'); // We can get and set the assigned class attributes via the // className property console.log(mySpan.className); mySpan.className = 'text-white border-white'; 

A Few Ideas

Now that we’ve delved into the capabilities of Element.classList , try everything out and see if you can find some useful applications for these little techniques. You might use classList.toggle() to show and hide a menu using CSS classes. You might highlight a selected option in a list of options by using classList.add() or classList.remove() on each option. You might let users change themes on your site by calling classList.replace() as they select the next theme. Element.classList provides a powerful set of building blocks for you to create simple, succinct, yet sturdy solutions as you develop. It’s a great example of how HTML, CSS, and JavaScript can work together to great effect without any additional libraries.

Источник

Добавляем и удаляем CSS-классы при помощи Javascript

В этой статье мы расскажем о двух способах манипуляции с HTML class . В первом используется Javascript-свойство classList , а во втором задействуется библиотека jQuery . Для начала, взгляните на следующий код:

В нем представлена кнопка с событием onclick , которое позволяет переключать цвет кнопки. CSS-код определяет классы для установки цвета фона:

Единственное, что здесь остается сделать, это реализовать функцию toggleColor() :

classList

У каждого элемента есть свойство classList , которое содержит в себе атрибуты HTML style class . Это свойство включает в себя методы, позволяющие добавлять или удалять классы:

function toggleColor() < var myButtonClasses = document.getElementById("btn1").classList; if (myButtonClasses.contains("blue")) < myButtonClasses.remove("blue"); >else < myButtonClasses.add("blue"); >if (myButtonClasses.contains("red")) < myButtonClasses.remove("red"); >else < myButtonClasses.add("red"); >>

В приведенном выше примере используется три метода classList .

• contains() – возвращает значение true , если у элемента имеется родительский класс. Если же его нет, то возвращается значение false ;
• add() – добавляет заданный класс к элементу. Это действие игнорируется, если элемент уже содержит заданный класс;
• Remove() — заданный класс, при его наличии, удаляется.

Эту задачу можно решить проще при помощи метода toggle() , который добавляет указанный атрибут class в HTML при его отсутствии, или удаляет его, если он уже применен:

При работе с несколькими классами их можно разделять запятыми:

document.getElementById("btn1").classList.toggle("blue”, “bold"); document.getElementById("btn1").classList.toggle("red”, “italics");

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

JQuery

jQuery предлагает методы, которые работают по тому же принципу. Но также позволяют использовать укороченные свойства для выделения элементов. Давайте посмотрим, как функция toggleColor() должна быть написана на jQuery :

Можно использовать addClass() , removeClass() и hasClass() для toggleColor() . Обратите внимание, что новые HTML style class можно перечислять через пробел в той же строке.

$("#btn1").toggleClass("blue bold"); $("#btn1").toggleClass("red italics");

На этом все! Теперь вы знаете, как без труда изменять внешний вид DOM-элементов !

Подборка курсов по Javascript

4.4 GeekBrains еще 4 курса

4.4 Нетология еще 3 курса

4.4 Яндекс.Практикум еще 2 курса

4.2 Оtus

4.4 Skillbox

4.5 LoftSchool

Комментарии

писец.
1.Почему не выделили в список методы для управления классами?
И почему в списке нет метода Toggle, но при этом его внизу описывают как будто это бесполезный метод и в список его заносить не нужно.
2.А что для работы с элементами люди пользуются ID только?, я вот искал как JS по классу находит элемент и добавляет, удаляет другие классы. Люди стараются наоборот не использовать ID, так как как правило все элементы повторяются на сайте, и только и исключительных случаях они не повторяются.
Кнопки, формы, поля, переключатели, виджеты, почти всегда во множественном количестве присутствуют.

Источник

HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three elements with a class attribute with the value of «city». All of the three elements will be styled equally according to the .city style definition in the head section:

Example

In the following example we have two elements with a class attribute with the value of «note». Both elements will be styled equally according to the .note style definition in the head section:

Example

My Important Heading

This is some important text.

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces <>:

Example

Create a class named «city»:

London is the capital of England.

Paris is the capital of France.

Tokyo is the capital of Japan.

Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. . The element will be styled according to all the classes specified.

In the following example, the first element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

Example

London

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both and

point to the «city» class and will share the same style:

Example

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example

Click on a button to hide all elements with the class name «city»:

Don’t worry if you don’t understand the code in the example above.

You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.

Chapter Summary

• The HTML class attribute specifies one or more class names for an element
• Classes are used by CSS and JavaScript to select and access specific elements
• The class attribute can be used on any HTML element
• The class name is case sensitive
• Different HTML elements can point to the same class name
• JavaScript can access elements with a specific class name with the getElementsByClassName() method

Источник