jqueryでCSSクラスを変更する方法-フロントエンドQ&A-php.cn

jqueryでCSSクラスを変更する方法

青灯夜游

リリース： 2022-04-21 14:15:29

オリジナル

2973 人が閲覧しました

変更方法: 1. attr() を使用してクラス属性値を設定し、CSS クラス名を変更します。構文は "element object.attr("class","new class")" です。 2.古いクラスを削除し、新しい CSS クラスを追加する場合、構文は「element object.removeClass("古いクラス名").addClass("新しいクラス名")」となります。

jqueryでCSSクラスを変更する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jquery で CSS クラスを変更する方法

方法 1: attr() を使用してクラス属性値を設定し、CSS を変更するclass name

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").attr("class","intro2");
				});
			});
		</script>
		<style type="text/css">
			.intro1 {
				font-size: 20px;
				color: red;
			}

			.intro2 {
				font-size: 30px;
				color: peru;
			}
		</style>
	</head>

	<body>
		<h1 id="h1">这是一个大标题</h1>
		<p class="intro1">这是一个段落</p>
		<button>修改css类</button>
	</body>
</html>

ログイン後にコピー

jqueryでCSSクラスを変更する方法

#方法 2:removeClass() を使用して古いクラスを削除し、addClass() を使用して新しい CSS クラスを追加します

removeClass() メソッドは、選択した要素から 1 つ以上のクラスを削除します。
addClass() メソッドは、選択した要素に 1 つ以上のクラスを追加します。このメソッドは既存のクラス属性を削除せず、1 つ以上のクラス属性を追加するだけです。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").removeClass("intro2").addClass("intro1");
				});
			});
		</script>
		<style type="text/css">
			.intro1 {
				font-size: 20px;
				color: red;
			}

			.intro2 {
				font-size: 30px;
				color: peru;
			}
		</style>
	</head>

	<body>
		<h1 id="h1">这是一个大标题</h1>
		<p class="intro2">这是一个段落</p>
		<button>修改css类</button>
	</body>
</html>

ログイン後にコピー

jqueryでCSSクラスを変更する方法