ホーム > jquery > jQuery .addClass()

jQuery .addClass()

jQueryリファレンス

ページ内リンク

.addClass() 動作内容

.addClass() 構文

サンプルコード

.addClass() 動作内容

jQueryオブジェクトで指定した要素に対して addClass( ) の引数で指定したクラスを追加します。引数に、クラス名、function、を指定することが出来ます。function で追加するクラスを操作することが可能です。

.add() 構文

jQueryオブジェクト.addClass(引数)

引数	構文	返り値	Ver
クラス名	.addClass(クラス名)	jQueryオブジェクト	Ver1.0
追加するクラスをクラス名で指定
function	.addClass(function)	jQueryオブジェクト	Ver1.4
追加するクラスを function で指定

サンプルコード

.addClass(クラス名)

jQueryオブジェクトで指定している span要素にクラス名 selected を追加しています。selectedクラスが追加されることで、span要素が赤文字になります。

ブラウザ
jQuery
css
body
html

$(
	function(){
		$("span").addClass("selected");
	}
);

function(){

$("span").addClass("selected");

}

);

p{font-size:15px;}
span{font-size:30px;}
.selected{color:red;}

p{font-size:15px;}

span{font-size:30px;}

.selected{color:red;}

<p>p要素文字列</p>
<span>span要素文字列</span>

1 2	<p>p要素文字列</p> <span>span要素文字列</span>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>addClass jquery サンプル | WEPICKS!</title>
<script src="../../jquery-3.2.1.js"></script>
    
<!-- // =========================== jquery =========================== -->
<script type="text/javascript">
$(
	function(){
		$("span").addClass("selected");
	}
);
</script>
<!-- =========================== jquery =========================== // -->

<!-- // =========================== css =========================== -->
<style type="text/css">
p{font-size:15px;}
span{font-size:30px;}
.selected{color:red;}
</style>
<!-- =========================== css =========================== // -->

</head>
<body>

<!-- // =========================== body ここから =========================== -->
<p>p要素文字列</p>
<span>span要素文字列</span>
<!-- =========================== body ここまで =========================== // -->

</body>
</html>

<!DOCTYPE html>

<head>

<title>addClass jquery サンプル | WEPICKS!</title>

function(){

$("span").addClass("selected");

}

);

</script>

p{font-size:15px;}

span{font-size:30px;}

.selected{color:red;}

</style>

</head>

<body>

<p>p要素文字列</p>

<span>span要素文字列</span>

</body>

</html>

– サンプル Click Here ! –

.addClass(クラス名) クリックイベント

jQueryオブジェクトで指定している div要素にクラス名 bg-blue を追加しています。クリックイベントで bg-blueクラスが追加されます。

ブラウザ
jQuery
css
body
html

<script type="text/javascript">
$(
	function(){
		$("button").click(
			function(){
				$("div").addClass("bg-blue");
			}
		);
	}
);
</script>

function(){

$("button").click(

function(){

$("div").addClass("bg-blue");

}

);

}

);

</script>

<style type="text/css">
div{
	color:#4579cc;
	width:100px;
	height:100px;
	margin:10px;
	border:1px solid #4579cc;
}
.bg-blue{background-color:#6da5ff;}
</style>

div{

color:#4579cc;

width:100px;

height:100px;

margin:10px;

border:1px solid #4579cc;

}

.bg-blue{background-color:#6da5ff;}

</style>

<button>click here!</button>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>

<button>click here!</button>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="all">
<title>addClass jquery サンプル | WEPICKS!</title>
<script src="../../jquery-3.2.1.js"></script>
    
<!-- // =========================== jquery =========================== -->
<script type="text/javascript">
$(
	function(){
		$("button").click(
			function(){
				$("div").addClass("bg-blue");
			}
		);
	}
);
</script>
<!-- =========================== jquery =========================== // -->

<!-- // =========================== css =========================== -->
<style type="text/css">
div{
	color:#4579cc;
	width:100px;
	height:100px;
	margin:10px;
	border:1px solid #4579cc;
}
.bg-blue{background-color:#6da5ff;}
</style>
<!-- =========================== css =========================== // -->

</head>
<body>

<!-- // =========================== body ここから =========================== -->
<button>click here!</button>
<div>DIV</div>
<div>DIV</div>
<div>DIV</div>
<!-- =========================== body ここまで =========================== // -->

</body>
</html>