jQuery background-color et font-family ne cohabitent pas

**fleedalfire** · 21/03/2016, 12h03

Bonjour.
J'aimerai faire que l'on puisse choisir la couleur de fond avec le .css("background-color",...) et que l'on puisse choisir aussi la typo avec .css("font-family",...)
mon code marche à moitié. Je peux choisir la couleur et la typo, mais il ne s'ajoute pas l'un à l'autre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#leftCouleur div").click(function(){
 
			//récuperer la propriété css background-color
			var couleur = $(this).css("background-color");
			$("body").css("background-color",couleur);
 
			//récupérer la police css font-family
			var plce = $(this).css("font-family");
			$("#accueil").css("font-family",plce);
 
 
			//$("#leftCouleur").animate({"left": -100},600);
 
	});

**danielhagnoul** · 21/03/2016, 23h19

Il nous manque les codes CSS et HTML pour reproduire le problème.

Problème que je ne vois pas dans l'exemple ci-dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
    div { margin: 12px; min-height: 200px; border: 1px solid red; }
    #leftCouleur > div { font-family: cursive; background-color: lightgrey; }
    #accueil { font-size: 36px; }
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    $( function(){
 
      $( '#leftCouleur div').on( 'click', function( ev ){
 
        //récuperer la propriété css background-color
        var couleur = $( this ).css( 'background-color' );
 
        $( 'body' ).css( 'background-color', couleur );
 
        //récupérer la police css font-family
        var plce = $( this ).css( 'font-family' );
 
        $( '#accueil' ).css( 'font-family', plce );
      });    
 
    });
  </script>
</head>
<body>
 
  <div id="leftCouleur">
    <div>
      <p>Hello</p>
    </div>
  </div>
 
  <div id="accueil">
    <p>Bonjour</p>
  </div>
 
</body>
</html>

**fleedalfire** · 22/03/2016, 10h24

C'est projet que je dois réaliser pour mon certificat de programmeur web html, css, jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>Page d'accueil</title>
		<script src="js/jquery-2.2.1.js"></script>
		<script src="js/page_d'accueil.js"></script>
		<link href="css/style.css" rel="stylesheet"/>
	</head>
	<body>
		<header>
			<nav id="menuHaut">
				<button>Ouvrir</button>
				<ul>
					<li><a href="html/seconde_page.html">Seconde page</a></li>
					<li><a href="html/troisieme_page.html">Troisième page</a></li>
				</ul>
			</nav>
		</header>
 
		<div id="leftCouleur">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div>Arial</div>
			<div>Times New Romans</div>
			<div>Courier</div>
		</div>
 
		<div id="accueil"></div>
	</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*BALISE*/
*{
	margin: 0px;
	padding: 0px;
}
body{
	height: 100%;
	width: 100%;
	background-color: #EDFF0C;
}
nav{
	width: 100%;
	height: 100px;
	background-color: green;
	position: fixed;
	right: -96.5%;
	border-radius: 15px;
	z-index: 4;
}
button{
	margin-top: 30px;
}
ul{
	display: inline-block;
}
li{
	display: inline;
}
p{
	width: 40%;
	margin-top: 5%;
	margin-left: 5%;
	margin-right: 5%;
	text-align: justify;
}
h2{
	text-align: center;
	text-decoration: underline;
	font-size: 25pt;
	margin-top: 2%;
}
h3{
	padding-left: 18%;
	font-size: 20pt;
	padding-top: 2%;
}
 
 
/*CLASS*/
div.index{
	border: dashed 2px red;
	border-radius: 20px;
	width: 90%;
	height: 90%;
	float: left;
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
	background-image:linear-gradient(#EFFE8B, #FE4949);
}
 
/*ID*/
#gdphoto{
	border: solid 2px black;
	width: 460px;
	height: 460px;
	margin-left: 55%;
	margin-top: -6%;
	position: absolute;
	z-index: 2;
}
#vignette{
	height: 60px;
	width: 60px;
	border: solid 2px blue;
	border-radius: 100%;
	margin-top: 2px;
	margin-left: 2px;
	position: absolute;
	z-index: 2;
}
 
#leftCouleur{
	background-color: rgba(254,1,1,.5);
	width: 150px;
	height: 80%;
	position: fixed;
	left: -100px;
	top: 10%;
	text-align: center;
	z-index: 3;
	border-radius: 15px;
}
 
#leftCouleur div{
	width: 50px;
	height: 35px;
	cursor:pointer;
	margin-left: 25px;
	margin-right: 25px;
	border-radius: 100%;
	padding-top: 15px;
}
 
#leftCouleur div:nth-child(1){
	background-color: gold;
	margin-top: 30%;
}
 
#leftCouleur div:nth-child(2){
	background-color: orange;
}
 
#leftCouleur div:nth-child(3){
	background-color: red;
}
 
#leftCouleur div:nth-child(4){
	background-color: rgb(253,63,146);
}
 
#leftCouleur div:nth-child(5){
	background-color: rgb(219,0,115);
}
 
#leftCouleur div:nth-child(6){
	font-family: Arial;
	margin-bottom: -18px;
}
 
#leftCouleur div:nth-child(7){
	font-family: Times New Roman;
}
 
#leftCouleur div:nth-child(8){
	font-family: Courier New;
	margin-top: 25px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
$(document).ready(function(){
 
	$.getJSON("data.json",function(accueil){
 
		$.each(accueil,function(key,val){
 
			var message = "<div class='index'>";
			message += "<img id='vignette' src=" + val.vignette + "/>";
			message += "<h2>" + val.nom + "</h2>";
			message += "<h3>" + val.titre + "</h3>";
			message += "<img id='gdphoto' src=" + val.grandePhoto + "/>";
			message += "<p>" + val.description + "</p>";
			message += "</div>";
 
			$("#accueil").append(message);
 
		});//fin de la boucle each
 
	});//fin du get.JSON
 
 
 
 
	$("#leftCouleur div").click(function(){
 
			//récuperer la propriété css background-color
			var couleur = $(this).css("background-color");
			//$("").css("background-color",couleur);
 
			//récupérer la police css font-family
			var plce = $(this).css("font-family");
 
			if(couleur == couleur){
				$("body").css({"background-color":couleur,"font-family":plce});
			}
			if(plce == plce){
				$("body").css({"font-family":plce,"background-color":couleur});
			}
 
 
 
 
			//$("#leftCouleur").animate({"left": -100},600);
 
	});
 
			//le menu de gauche
		var vf = true;
			$("#leftCouleur").click(function(){
 
				if(vf == true){
 
					$("#leftCouleur").animate({"left":0},600);
					$("#menuHaut").animate({"right":"-96.5%"},600);
					vf = false;
 
				}else{
 
					$("#leftCouleur").animate({"left":-100},600);
					vf = true;
 
				}
 
			});
 
 
			//le menu du haut
			$("#menuHaut").click(function(){
 
				if(vf == true){
 
					$("#menuHaut").animate({"right":0},600);
					$("#leftCouleur").animate({"left":-100},600);
					vf = false;
 
				}else{
 
					$("#menuHaut").animate({"right":"-96.5%"},600);
					vf = true;
 
				}
 
			});
 
});//fin du ready

Et ça c'est le json, car j'ai une base de donnée en json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
[
	{
		"nom": "Berlin",
		"titre": "Ville Allemande",
		"pop": "3 400 000 habitants",
		"vignette": "http://lorempixel.com/40/40/city/1/",
		"grandePhoto": "http://lorempixel.com/570/570/city/1/",
		"description": "Berlin est la capitale et la plus grande ville d'Allemagne, ainsi que la deuxième ville de l'Union européenne par sa population. Située dans le nord-est du pays, elle forme un land (État fédéré) à part entière et compte environ 3,4 millions d'habitants. Ses habitants s'appellent les Berlinois."
		}, 
		{
		"nom": "Los Angeles",
		"titre": "Ville Américaine",
		"pop": "3 792 621 habitants",
		"vignette": "http://lorempixel.com/40/40/city/2/",
		"grandePhoto": "http://lorempixel.com/570/570/city/2/",
		"description": "Los Angeles est la deuxième plus grande ville des États-Unis après New York. Elle est située dans le sud de l'État de Californie, sur la côte pacifique. Les Américains l'appellent souvent par son diminutif, L.A. . Los Angeles signifie « les anges » en espagnol et ses habitants sont appelés Angelenos."
		}, 
	{
		"nom": "Pékin",
		"titre": "Ville Chinoise",
		"pop": "19 600 000 habitants",
		"vignette": "http://lorempixel.com/40/40/city/10/",
		"grandePhoto": "http://lorempixel.com/570/570/city/10/",
		"description": "Pékin2 est la capitale de la République populaire de Chine. Située dans le nord du pays, la municipalité de Pékin (北京市, abrégé en 北京), d'une superficie de 16 800 km2, borde la province du Hebei ainsi que la municipalité de Tianjin. Pékin est considérée comme le centre politique et culturel de la Chine, tandis que Hong Kong et Shanghai dominent au niveau économique."
		}, 
		{
		"nom": "New York",
		"titre": "Ville Américaine",
		"pop": " 8 336 697 habitants",
		"vignette": "http://lorempixel.com/40/40/city/4/",
		"grandePhoto": "http://lorempixel.com/570/570/city/4/",
		"description": "New York1, officiellement City of New York, autrement connue sous les noms et abréviations de New York City ou NYC, est la plus grande ville des États-Unis et l'une des plus importantes du continent américain. Elle se situe dans le Nord-Est des États-Unis, sur la côte atlantique, à l'extrémité sud-est de l'État de New York."
		}, 
		{
		"nom": "Dallas",
		"titre": "Ville Américaine",
		"pop": " 6 371 773 habitants",
		"vignette": "http://lorempixel.com/40/40/city/5/",
		"grandePhoto": "http://lorempixel.com/570/570/city/5/",
		"description": "Dallas est une ville de l'État du Texas, aux États-Unis. Elle couvre une surface de 997 km² et comptait 1 241 162 habitants en 2012 (9e ville des États-Unis). Avec la ville voisine de Fort Worth, Dallas fait partie d'une vaste aire urbaine de 6 371 773 habitants, le Dallas/Fort-Worth Metroplex, ou simplement « the Metroplex », la 4e aire urbaine du pays. Dallas est listée comme ville mondiale gamma par l'université de Loughborough de Londres. La ville est le siège du comté de Dallas."
		}, 
		{
		"nom": "Paris",
		"titre": "Ville Française",
		"pop": " 2 200 000 habitants",
		"vignette": "http://lorempixel.com/40/40/city/6/",
		"grandePhoto": "http://lorempixel.com/570/570/city/6/",
		"description": "Paris est la commune la plus peuplée et la capitale de la France, le chef-lieu de la région Île-de-France et l'unique commune-département du pays.<br />Elle se situe au centre du Bassin parisien, sur une boucle de la Seine, entre les confluents de celle-ci avec la Marne et l’Oise. Ses habitants s’appellent les Parisiens. <br />La ville est divisée en vingt arrondissements. D’après le recensement de l’Inseeb 1, la commune de Paris comptait au 1er janvier 2010 plus de 2,2 millions d'habitants."
		}, 
		{
		"nom": "Sydney",
		"titre": "Ville Australienne",
		"pop" : "4 490 662 habitants",
		"vignette": "http://lorempixel.com/40/40/city/7/",
		"grandePhoto": "http://lorempixel.com/570/570/city/7/",
		"description": "Sydney est la ville la plus peuplée d'Australie avec une aire urbaine comprenant en 2009 une population de 4 490 662 habitants répartis sur près de 12 150 km2. Elle est la capitale de l'État de Nouvelle-Galles du Sud et est située sur la côte sud-est du pays. Ses habitants s'appellent les Sydneyites ou Sydneysiders. Première des colonies européennes d'Australie, Sydney fut fondée en 1788 à Sydney Cove par le capitaine Arthur Phillip qui commandait la première flotte venant du Royaume-Uni."
		}, 
		{
		"nom": "San Francisco",
		"titre": "Ville Américaine",
		"pop": " 8 336 697 habitants",
		"vignette": "http://lorempixel.com/40/40/city/9/",
		"grandePhoto": "http://lorempixel.com/570/570/city/9/",
		"description": "San Francisco, officiellement City and County of San Francisco, est une ville des États-Unis située dans l'État de Californie. Son nom est couramment abrégé en SF et la ville est surnommée The City by the Bay1. La ville est située à l'extrémité nord de la péninsule de San Francisco, entre l'océan Pacifique à l'ouest et la baie de San Francisco à l'est."
		}
]

jQuery background-color et font-family ne cohabitent pas

jQuery

Discussions similaires

Partager

Partager