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().

<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>

<p class="base">hello world</p>

Looking at the example source above, the result is:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>quizgum :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
</script>
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
</head>
<body>
<p class="base">hello world</p>
</body>
</html>

Source result above

hello world

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

.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

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

The source above means adding base_text to the base class.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>quizgum :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
    var base = $('.base');
    base.addClass('base_text');
});
</script>
<style>
.base{border:4px solid yellow}
.base_text{font-weight:bold;color:hotpink}
</style>
</head>
<body>
<p class="base">hello world</p>
</body>
</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

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

CSS

.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

var id2 = $('#each2');
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. 

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>quizgum :: jQuery Course</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
    var id2 = $('#each2');
    id2.removeClass('common');
});
</script>
<style>
.common{font-size:20px;color:hotpink}
</style>
</head>
<body>
    <div id="each1" class="common">hello world</div>
    <div id="each2" class="common">hello world</div>
</body>
</html>

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

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