jQueryでCSSを動的に変更・追加・削除する方法

jQueryでCSSを動的に変更・追加・削除する方法 javascript
この記事は約3分で読めます。
スポンサーリンク

jQueryで動的にCSSを変更する場合の記述を紹介します。
今回のdemoで変更する要素は、下のHTMLとCSSです。

HTML/CSS

<div class="demo1">
	<p>今日のテンションは<span>すげぇ高い</span>ぜ!</p>
</div>
<style>
	.demo1 {
		width: 100%;
		height: 200px;
		padding-top: 9%;
		background: #ededed;
		border-radius: 24px;
	}
	.demo1 p {
		font-size: 24px;
		text-align: center;
	}
	.demo1 p span {
		font-size: 32px;
		font-waight: bold;
		color: #22cda9;
		display: inline-block;
	}
</style>

CSSを変更

まず最初はjQueryで「.demo1 p span」の色とテキストを変更してみます。
CSSを変更するには「.css({})」を使って変更できます。
テキストの変更は「.text()」を使います。

DEMO

今日のテンションはすげぇ高いぜ!

jQuery

$(function() {
	$(".demo1 p span").css({color: "#3183cf"});
	$(".demo1 p span").text("かなり低い");
});

CSSを追加

CSSを追加する時も、「.css({})」を使います。
変更と違うのは、もともとのCSSに無い要素を「.css({})」を使って書くことです。
今度は、「.demo1 p 」に背景を付けてみます。

DEMO

今日のテンションはすげぇ高いぜ!

$(function() {
	$(".demo1 p").css({background: "#ffdd9c"});
});

CSSを削除

要素に当てたスタイルを削除する場合もまた「.css({})」を使います。
CSSを削除する場合は、変更する場合と似ていて元々あるスタイルをjQueryで上書きします。
今回は「.demo1」の背景を削除します。

DEMO

今日のテンションはすげぇ高いぜ!

$(function() {
	$(".demo1").css({background: "none"});
});

この他にCSSを変更して、色々試してみてください!
ちなみに「font-size」などの真ん中の「 – 」は使えないので、この様に「fontSize」真ん中の「 – 」の後は大文字にします。
「backgroundPosition」や「paddingTop」、「marginBottom」なども、うっかり間違えやすくて、jQueryが動かなくて数時間、悩むことになるので気を付けてください。

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました