jqueryで存在しない要素のcssをあらかじめ設定する方法

##質問
jqueryで存在しない要素のcssをあらかじめ設定する方法が知りたいです。
あとあと追加する要素のcssをあらかじめ設定したいです。

行動規範の内容に同意します

回答2件

cssを持ったクラスを用意しておき、要素を追加するときにclass属性にそのクラス名を指定すればいいです。

どのようなcssにするか決まっていない場合はどうすれば良いのでしょうか？例えば、ユーザーがカラーピッカーなどで色を設定するときなどです。

そのクラス名に対して操作を行えばいいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>addElementWithCss</title>
6<style>
7.newClass {
8  width  : 100px;
9  height : 100px;
10  border : solid 1px;
11}
12</style>
13<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
14<script>
15$(function() {
16	$('#add').on('click', function() {
17		$('#container')
18			.append(
19				$('<div />', {
20					'class' : 'newClass',
21				})
22				.text('abc')
23				.css('background-color', '#00ff00')
24			);
25	});
26
27	$('#reverseColor').on('click', function() {
28		$('.newClass').each(function() {
29			var color = $(this).css('color');
30			var backgroundColor = $(this).css('background-color');
31			$(this).css('color', backgroundColor);
32			$(this).css('background-color', color);
33		});
34	});
35});
36</script>
37</head>
38<body>
39  <input type="button" id="add" value="追加">
40  <input type="button" id="reverseColor" value="色反転">
41  <div id="container">
42  </div>
43</body>
44</html>

ただ、新しく追加する要素をイベントターゲットにするときには注意が必要です。

JavaScipt
1	$('.newClass').on('click', function() {
2		alert($(this).text());
3	});

では動作せず、

JavaScipt
1	$(document).on('click', '.newClass', function() {
2		alert($(this).text());
3	});

と書きましょう。

投稿2016/12/24 01:01

編集2016/12/24 02:49

naomi3

総合スコア1105

退会済みユーザー

2016/12/24 01:08

どのようなcssにするか決まっていない場合はどうすれば良いのでしょうか？例えば、ユーザーがカラーピッカーなどで色を設定するときなどです。

行動規範の内容に同意します

ベストアンサー

jQueryでCSSのクラスセレクタをhtmlタグに設定したいときは、addClass関数を使います。以下にコードを書いておくので、参考にしてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<span>カラーピッカーもどき</span>
9<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
10<script>
11    $(window).on("mouseup", function (e) {
12        var getX = e.pageX;
13        var getY = e.pageY;
14        var backColor = "#" + ((getX + getY) / $(this).width()).toString(16).slice(2, 8);
15        $("body").css({
16            background: backColor
17        });
18        $("span").addClass("text");//ここでクラスをspanタグに追加している
19        $(".text").text("現在の色は" + backColor);
20    });
21</script>
22</body>
23</html>