class属性の追加・削除

2015年10月29日

class属性は、ほかの属性とは違い、スペース区切って複数の値を設定できます。class属性の操作には、専用の命令はあります。

class属性の追加

class属性を追加するときは、addClass()命令を使用します。括弧内に追加したいclass属性の値を書きます。複数のclass属性をスペース区切りで追加できます。サンプルコードを見ると確認できますが、グレーの四角を赤い四角に変更しています。

class属性の削除

class属性を削除するときは、removeClass()命令を使用します。括弧内に削除したいclass属性値を書きます。複数のclass属性をスペース区切りで書けます。サンプルコードを実行すると、背景を黄色に設定した四角が黄色ではなく、グレーになっているのが確認できます。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>


    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        font-weight:100;
        margin:0 auto;}

    .box{
        width:100px;
        height:100px;
        margin:8px;
        background-color:#f0f0f0;}
    .bgred{background-color:red;}
    .bgyellow{background-color:yellow;}
    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">
    
<div class="box"></div>
<div class="box bgyellow"></div>
    
</div><!--contatiner-->

<script>
$(document).ready(function(){

    $("div.box:eq(0)").addClass("bgred");
    $("div.box:eq(1)").removeClass("bgyellow");

});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

font-weight:100;

margin:0 auto;}

.box{

width:100px;

height:100px;

margin:8px;

background-color:#f0f0f0;}

.bgred{background-color:red;}

.bgyellow{background-color:yellow;}

</style>

</head>

<body>

</div>

$(document).ready(function(){

$("div.box:eq(0)").addClass("bgred");

$("div.box:eq(1)").removeClass("bgyellow");

});

</script>

</body>

</html>