jQueryオブジェクト１１

jQuery 授業



要素のクラスを追加／削除 - addClass/removeClass



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素のクラスを追加／削除 - addClass/removeClass</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
body {
background-color: #FCF;
}

#div1 {
width: 300px;
height: 100px;
}

#div2 {		
width: 300px;
height: 100px;
}

#div3 {
width: 300px;
height: 100px;
}

#div4 {		
width: 300px;
height: 100px;
}

.box {
background-color: #F00;
}

.alert {
background-color: #FF0;
}

</style>
</head>
<body>

<div id="div1">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" class="box">div3</div>
<!-- [ alert ]の文字を削られた -->
<div id="div4" class="box alert">div4</div>

<script>
$(function() {
$('#div1').addClass('box');
$('#div2').removeClass('box');
$('#div3').addClass('alert');
$('#div4').removeClass('alert');
});
</script>
</body>
</html>

ブラウザで表示【 Chrome 】