QUIZGUM

Coding Class

Quizgum : adding class, removing class

Adding and Deleting Classes

Adding and Deleting Classes You're sure what this means.

I didn't understand what this part was when I first saw it, but when I saw it, I understood it.

That's not difficult. I just didn't know because I saw a book roughly .. ^^

addClass()

Adding a class uses addClass().

  1. <style>
  2. .base{border:4px solid yellow}
  3. .base_text{font-weight:bold;color:hotpink}
  4. </style>
  5.  
  6. <p class="base">hello world</p>

Looking at the example source above, the result is:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>quizgum :: jQuery Course</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
  7. <script type="text/javascript">
  8. </script>
  9. <style>
  10. .base{border:4px solid yellow}
  11. .base_text{font-weight:bold;color:hotpink}
  12. </style>
  13. </head>
  14. <body>
  15. <p class="base">hello world</p>
  16. </body>
  17. </html>

Source result above

hello world

You can add the below CSS to the base class of the above source.

  1. .base_text{font-weight:bold;color:hotpink}

So the text of the base class will turn bold and hot pink?

How to use addClass()

target class.addClass(' Class name to add');

jQuery

  1. var base = $('.base');
  2. base.addClass('base_text');

The source above means adding base_text to the base class.

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>quizgum :: jQuery Course</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.     var base = $('.base');
  10.     base.addClass('base_text');
  11. });
  12. </script>
  13. <style>
  14. .base{border:4px solid yellow}
  15. .base_text{font-weight:bold;color:hotpink}
  16. </style>
  17. </head>
  18. <body>
  19. <p class="base">hello world</p>
  20. </body>
  21. </html>

View results

hello world

As shown above, css in base_text has been applied as well.

Now let's look at removeClass();

removeClass()

Now you know what removeClass() does? The opposite of addClass() is to remove a class.

It's so easy, so let's finish this one example. ^^

HTML

  1. <div id="each1" class="common">hello world</div>
  2. <div id="each2" class="common">hello world</div>

CSS

  1. .common{font-size:20px;color:hotpink}

If you write like this and see the source result above, each1, each2 has class common, so the font size is 20 pixels in color hot pink.

[i am id each1]hello world

[i am id each2]hello world

You get the same result as above. If you add the following jQuery source to the above result, removeClass ('common') is applied to IDeach2, so it is not a common class, so you can get away from the influence of font color hot pink and font size of 20 pixels.

jQuery

  1. var id2 = $('#each2');
  2. id2.removeClass('common');

Result.

[i am id each1]hello world

[i am id each2]hello world

Then write the source so that you can test it in the web editor. 

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>quizgum :: jQuery Course</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
  7. <script type="text/javascript">
  8. $(function(){
  9.     var id2 = $('#each2');
  10.     id2.removeClass('common');
  11. });
  12. </script>
  13. <style>
  14. .common{font-size:20px;color:hotpink}
  15. </style>
  16. </head>
  17. <body>
  18.     <div id="each1" class="common">hello world</div>
  19.     <div id="each2" class="common">hello world</div>
  20. </body>
  21. </html>

So we learned about addClass() and addRemove().

In the next lesson, you will learn about attr to change the attributes of an element.