クラス　追加、削除

タグにクラス属性を使いますね。したのふうに

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

上のソースでbaseを削除することもできるし、他のクラスを使いすることもできます。
クラスを追加する時にはaddClass()を使います。

addClass()

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

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

上のソースの結果をみるためしたのソースを実行して結果をみてください。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
</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>

上のソースの結果

hello world

したのCSSを書いてから、

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

baseクラスにbase_textクラスを追加してみましょう。そしてからテキストは太くなるし、ホットピンク色になります。

addClass()の使い方

適用するセレクタ.addClass('使いするクラスの名');

jQuery

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

위에소스는 base클래스에 base_text를 추가 한다는 뜻입니다.

上のソースはbaseクラスにbase_textクラスを追加する意味です。
では、ソースでみてみましょう。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: jQuery</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script>
$(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>

結果

hello world

base_textクラスが追加されたので太くなりました、色もホットピンクですね。

では、今度はremoveClass();について調べましょう。

removeClass()

removeClass()はクラスを削除する時に使います。

これはすごく易いです。

HTML

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

CSS

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

こう作成して上のソースの結果をみると idがeach1, each2　全部　class属性に commonがあります。なので色はホットピンク、大きさは20pxになります。

上のHTML,CSSのソースだけ使うとしたの結果が出ます。

[i am id each1]hello world

[i am id each2]hello world

jQuery

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

上のjQueryソースを使うとid each2には removeClass('common')が作動され common クラスはなくなるので、
ホットピンク、20pxは適用されません。

結果

[i am id each1]hello world

[i am id each2]hello world

では、ソースで結果をみてみましょう

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

ありがとうございます。