Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

jQuery css, addClass, removeClass

今回は、jQueryの「css」,「addClass」, 「removeClass」について書きます。


・「cssメソッド

cssメソッドを使うと、指定した要素のスタイルを追加・変更できます。
例えば、文字色や背景色などを変えたい場合に使えます。

<body>
	<h1>Hello</h1>
	<script>
	$(function(){
		$('h1').css('color','blue');
	});
	</script>
</body>

実行結果
f:id:gupuru:20140522000918p:plain

引数とかは、このようになっています。

$('要素').css('プロパティ', '値');

cssメソッドは、このようにすると複数設定が可能です。

$('h1').css('color','blue').css('background','green');
$('h1').css({'color':'blue','background':'green'});

実行結果
f:id:gupuru:20140522001309p:plain


また、「.css('プロパティ', '')」とすると、スタイルを削除できます。

$('h1').css({'color':'blue','background':'green'});

//colorだけ削除
$('h1').css('color','');

実行結果
f:id:gupuru:20140522001851p:plain



・「addClass」メソッド

addClassメソッドを使うと、指定した要素にCSSクラスを追加できます。

<!-- 省略 -->

<style>
    .hello{
	color: yellow;
	margin-left: 30px;
    }
</style>

<!-- 省略 -->

<body>
	<h1>Hello</h1>
<script>
	$(function(){
		$('h1').addClass('hello');
	});
</script>
</body>

実行結果
f:id:gupuru:20140522002150p:plain

引数とかは、このようになっています。

$('要素').addClass('クラス名');

ちなみに、idは「attr」を使います。



・「removeClass」メソッド

removeClassメソッドを使うと、指定した要素から、CSSクラスを削除できます。

<!-- 省略 -->

<style>
    .hello{
	color: yellow;
	margin-left: 30px;
    }
</style>

<!-- 省略 -->

<body>
	<h1 class="hello">Hello</h1>
	<script>
	$(function(){
		$('h1').removeClass('hello');
	});
	</script>
</body>

実行結果
f:id:gupuru:20140522002753p:plain

引数とかは、このようになっています。

$('要素').removeClass('クラス名');


これで、終わります。


参考サイト
jQuery:css()メソッドで指定した要素にCSSを追加する | raining
jQuery – CSSのclassを追加・削除する『 addClass() / removeClass() / toggleClass() 』 | 1:n – DETELU Blog