「jqueryでCSSの追加・削除」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryでCSSの追加・削除

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jqueryでCSSの追加・削除</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button.onlyAdd").bind("click", changeClassOnlyAdd);
$("button.onlyDel").bind("click", changeClassOnlyDel);
$("button.Add_Del").bind("click", changeClassAdd_Del);
});
// 追加
var changeClassOnlyAdd = function(e)
{
paretDiv = $(e.target).parents("#target");
paretDiv.find("div").addClass("onClass");
};
// 削除
var changeClassOnlyDel = function(e)
{
paretDiv = $(e.target).parents("#target");
paretDiv.find("div").removeClass("onClass");
};
// classがあれば削除、なければ追加
var changeClassAdd_Del = function(e)
{
paretDiv = $(e.target).parents("#target");
paretDiv.find("div").toggleClass("onClass");
};
</script>
<style type="text/css">
.onClass
{
color:red;
}
</style>
</head>
<body>
<h1>jqueryでCSSの追加・削除</h1>
<div id="target">
<div>サンプル文字</div>
<button class="onlyAdd">追加だけ</button>
<button class="onlyDel">削除だけ</button>
<button class="Add_Del">追加と削除</button>
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>