jQuery の屬性とスタイル (4)
クラス名を動的に変更することで、要素を変更してさまざまな効果を示すことができます。 HTML 構(gòu)造では、複數(shù)のクラスがスペースで區(qū)切られます。ノード (またはラベル) に複數(shù)のクラスが含まれる場合、DOM 要素の応答の className 屬性はクラス名の配列ではなく、スペースを含む文字列を取得します。マルチクラスの操作は非常に面倒です。同じ jQuery 開発者もこの狀況を考慮し、クラス名を動的に追加するための .addClass() メソッドを追加しました
addClass( className ) メソッド
次のコードを見てください:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
div{
width:200px;
height:200px;
}
.bg{
background:red;
}
</style>
</head>
<body>
<div id="div">php 中文網(wǎng)</div>
<script type="text/javascript">
$("#div").addClass('bg');
</script>
</body>
</html>removeClass() スタイルを削除します
次の場合:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style type="text/css">
.div{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<div class="div">php 中文網(wǎng)</div>
<script type="text/javascript">
$(".div").removeClass("div");
</script>
</body>
</html>上記のコードにより、divのスタイルが削除されます
