Removeclass and addclass in javascript

Добавляем и удаляем 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, так как как правило все элементы повторяются на сайте, и только и исключительных случаях они не повторяются.
Кнопки, формы, поля, переключатели, виджеты, почти всегда во множественном количестве присутствуют.

Источник

How to addClass, removeClass, toggleClass in JavaScript

The most complete guide to learning JavaScript ever built.
Trusted by 82,951 students .

jQuery is a pretty cool framework, it has it’s uses, it’s pretty reliable, but remember: it’s written with JavaScript. It’s not a language by itself, it’s not a magical tool, nor the answer to our prayers. It doesn’t make front-end animation/AJAX/DOM manipulating easy, it makes you think less and miss out on vital knowledgable. What happened before jQuery?

Check out Apollo.js, the latest version of these scripts integrated with HTML APIs, the most powerful class API on the web!

jQuery makes you as a developer reliant on a framework, and (I’m going to say it!)… lazy, to some extent. I’d succumbed to being lazy, and at times have included the mighty jquery.js file for a few simple lines of code. What an idiot.

I believe to fully master your front-end development you must learn the workings behind it, find out how jQuery works. For too long I’ve relied on jQuery as a supplement to get my jobs done, and from it my vanilla/raw JavaScript has suffered. I’m slowly phasing jQuery out, and focusing more on my JavaScript skills to become fully framework agnostic. My blog is now totally jQuery-free.

Reasons why I (and you) shouldn’t rely on jQuery

1. You didn’t write it
2. You don’t understand it
3. It’s a lot of code
4. It’s not a standard (no governing body)
5. You have no control over it’s future
6. It’s not a best-practice
7. Even jQuery has it’s bugs
8. What if a future job doesn’t allow/use it?
9. You can only do your job with a framework?
10. It conflicts with other libraries/software (don’t tell me $.noConflict() is bulletproof)
11. You’re probably not even using a huge % of the library
12. JavaScript is in-fact more similar than you think to jQuery

So what does this tell us? We don’t want to write our own scripts (or know how), we don’t get it if we even tried, we’d rather include a huge framework that we don’t understand to get a job done, it’s not a standard practice or web standard. It’s got its own bugs, and creating without jQuery – you’re screwed. Wasted resources as we’re including stuff we don’t need too.

Reasons to use jQuery

1. It saves time
2. Does the hard work for me
3. Cross-browser support is pretty good
4. Makes life and selectors easy

I can’t think of that many more reasons to use jQuery; it saves time, does the job for us, cross-browser support already nailed, makes selectors and my life real easy.

Weighing up the two on paper – we all sound very lazy. I’m writing this post because of many observations I’ve seen from around the web development community. I’ve seen people posting ‘use jQuery’ to countless raw JavaScript forum posts, support questions, and it’s killing JavaScript. Any syntax or DOM references I want to lookup in Google, I have to wade through countless jQuery pages and filter out what I really need. It’s the total opposite of what should be happening.

This is where this post comes in, and I hope to inspire some people to start creating their own raw JavaScript functions, jQuery-style, that they can reuse at any time, with ease. Here’s a few to get you started.

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

• Observables and Async Pipe
• Identity Checking and Performance
• Web Components syntax
• and Observable Composition
• Advanced Rendering Patterns
• Setters and Getters for Styles and Class Bindings

That went smoothly, check your email.

Checking for ‘hasClass’

We’ll start with hasClass, typically in jQuery this looks like so:

With it’s usage potentially something like this:

if ($('html').hasClass('ie6'))  // Do something crazy > else  // Phew > 

So we want to create our own hasClass now. We don’t want to know it ‘just works’. Here’s my stab at creating a nice hasClass function, that is reusable throughout any raw JavaScript project:

function hasClass(elem, className)  return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); > 

This uses a simple RegEx test, to ‘scan’ for our class name. Don’t know what RegEx is? It stands for RegularExpression, look it up – task 1!

Put into some practical use, we can then put it into practice, without duplicating the RegEx return each time:

if (hasClass(document.documentElement, 'ie6'))  // Do something crazy > else  // Phew > 

You can see how it’s super simple. Things might look a little backwards here, specifying the element inside the function as opposed to hooking off the selector, but don’t worry – it’s totally cool. document.documentElement refers to the root element of the document, i.e. the tag. Voila, we did it, it wasn’t so hard. You can then reuse this function throughout your code wherever you like to test if something has a class. This also comes in handy now in our addClass function, as we’ll be using it again!

Adding a class with ‘addClass’

Probably one of the most popular things to do with jQuery, and it’s so underrated as to how easy it really is with raw JavaScript. In jQuery, we’re used to this:

$('.button').click(function()  $(this).addClass('ie6rules'); >); 

Again, here’s my stab at creating a nice addClass function, which passes the className directly onto the element’s className attribute:

function addClass(elem, className)  if (!hasClass(elem, className))  elem.className += ' ' + className; > > 

You’ll notice we use our hasClass function again! It checks to see if the element has the class, but it reverts the expression meaning it will run if the element doesn’t have a class. The ‘ ‘ is in-fact adding a space before the class so it doesn’t join another class.

Using a bang (!) you can invert it’s meaning, so technically this means ‘if the element doesn’t have the class’. You could then use it like so on a JavaScript click handler:

document.getElementById('myButton').onclick = function()  addClass(document.documentElement, 'some-class'); > 

Again I used the document.documentElement, as you know this one now.

Removing a class with ‘removeClass’

Another useful jQuery gizmo, usually seen doing this:

$(element).removeClass(className); 

With some potential use like this:

if ($('html').hasClass('ie7'))  $('body').removeClass('sanity'); > 

Now we can create a removeClass function, which is a little more complicated, using RegEx again and our earlier hasClass:

function removeClass(elem, className)  var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' '; if (hasClass(elem, className))  while (newClass.indexOf(' ' + className + ' ') >= 0 )  newClass = newClass.replace(' ' + className + ' ', ' '); > elem.className = newClass.replace(/^\s+|\s+$/g, ''); > > > > 

We can then use it like so:

document.getElementById('myButton').onclick = function()  removeClass(document.documentElement, 'some-class'); > 

Adding/removing (toggling) the class with ‘toggleClass’

The toggle functions tend to be my favourites, allowing you to simply add/remove things as you please. With jQuery, this looks like so:

$(element).toggleClass(className); 

A usage example could be as follows:

$('.button').click(function() $(this).toggleClass('active'); >); 

Which would toggle the class ‘active’ for one click, and toggle it back for the second click. We can then begin to take this and create our own little function that does this for us:

function toggleClass(elem, className)  var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' '; if (hasClass(elem, className))  while (newClass.indexOf(' ' + className + ' ') >= 0 )  newClass = newClass.replace( ' ' + className + ' ' , ' ' ); > elem.className = newClass.replace(/^\s+|\s+$/g, ''); > else  elem.className += ' ' + className; > > 

Using some more RegEx and our hasClass function again, we can reuse most of the removeClass function and simply provide an else, to then add the class back on if it doesn’t exist! JavaScript is easy when you think about it logically, don’t get lost in the definitions/names of things.

As you can see, we can start to move into a jQuery-free state of mind. What’s also great is that a lot of cross-browser issues that require workarounds occur more in IE7 and IE8, which even jQuery is dropping as of Version 2.0. This makes us think about whether we really need to worry as much about backfilling our code with complex polyfill/compatibility issues when moving forward with our own little functions.

The possibilities are endless for what you decide to create.

Learn JavaScript the right way.

The most complete guide to learning JavaScript ever built.
Trusted by 82,951 students .

Источник