Modification de la taille de la police dans une div

Hello!

Alors voila je souhaiterais modifier la taille d'un texte dans un div en AJAX. J'ai déjà résolu mon problème a moitié, mais là, je crois que je vais devenir fou -_-:
Au début j'y arrivais pas, donc j'ai chercher sur internet et trouvé une démo que j'ai pris, analyser et modifier un peu (id des elements pour que ça marche.
Une fois que c’était ok, j'ai copier/coller mon bidouillage dans mon vrai fichier, et ça marche pas, alors que tout est exactement pareil!!
pls help xD
Voici le code

DEMO (éléments utiles en gras):

Code:

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
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style type="text/css">
.caption {
top:470px;
background-color:black;
text-align:center;
font-size:28px;
font-family:'Trebuchet MS',sans-serif;
color:white;
position:absolute;
width:700px;
height:70px;
margin-bottom:0px;
}
.button {
background-color: crimson;
background-image: -webkit-linear-gradient(top, crimson, crimson);
background-image: -moz-linear-gradient(top,crimson,crimson);
display: inline-block;
font-size: 24px;
font-family: 'Meiryo UI';
color: #fff;
text-decoration: none !important;
padding: 5px 20px;
line-height: inherit;
overflow: hidden;
position: relative;
border-radius: 2px;
margin-top: 13px;
margin-bottom: 10px;
}
	.button:hover {
		opacity: 0.9;
	}
	#content{
	font-family: 'Lato', sans-serif;
	text-align:justify;
	padding:10px;
	background-color:whitesmoke;
	font-size:14px;
	}
	#incfont{
	background-color: orange;
    background-image: -webkit-linear-gradient(top, orange, orange);
    background-image: -moz-linear-gradient(top,orange,orange);
	color:black;
	}
	#decfont{
	background-color: orange;
    background-image: -webkit-linear-gradient(top, orange, orange);
    background-image: -moz-linear-gradient(top,orange,orange);
	color:black;
	}
	#fontlinks{
	margin-left:30%;
	margin-right:30%;
	margin-top:0px;
	margin-bottom:20px;
	text-align:center;
	}
	.buttonfont{
	color:dimgrey;
	}
	
</style>
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#taille').change(function(){
            var newSize= document.getElementById('taille').value;
            $('#prevCom').css('font-size', newSize);
        });
    });
</script>
</head>
<body>
	<div style="width:55%;margin-left:17%;margin-right:28%;">
		<h2 style="font-family:'Trebuchet MS', Helvetica, sans-serif;color:crimson;text-align:center;width:700px;">Increase and Decrease Font Size using jQuery</h2>
		<p style="font-family:'Trebuchet MS', Helvetica, sans-serif;text-align:center;width:700px;">Demo by <a href="https://www.google.com/+Programming-free" style="color:crimson">Priyadarshini</a></p>
		<div style="background-color:gray;width:700px;height:400px;">
		<div id="prevCom" style="height:260px">
		ProgrammingFree is a technical blog with quality articles on various programming languages with appropriate source code,screenshots and live demos.This blog contains information on several programming topics with appropriate screenshots and code. I never write a blog here on any topic, without actually implementing it myself to make sure that I am not misleading the readers of my blog. I am a beginner in writing though not in programming, so I really value your suggestions on my writing skills. Please remember this - the best place to get help for the issues you have in your own implementation is at technical forums and not on blogs. I welcome comments about technical inaccuracies you may spot, or typos - or indeed improvements you might want to offer to the code I have presented, or any other aspect of this site.		
		</div>
		<br/>
		<div id="fontlinks">
		<a href="#" id="incfont" class="button buttonfont">A+</a>
		<a href="#" id="decfont" class="button buttonfont">A-</a>
                <br>
                <input type="number" id="taille" value="20">
		</div>
		<span class="caption"><a href="javascript:parent.window.location.href='http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html'" class="button">Tutorial</a></span>
	</div>
</body>
</html>

MON code:
html:

Code:

1
2
3
4
5
6
7
8
9
10
<div>
        <input type="number" id="taille" value="20"/>
</div>
<div id="blocImg" class="blocImg" onload="chargerImg()">
        <div id="prevCom">
            <?php
                 echo $listeModele[0]->texte; //texte qui doit changer de taille
            ?>
        </div>
</div>

AJAX

Code:

1
2
3
4
5
6
$(function() {
    $('#taille').change(function(){
        var newSize= document.getElementById('taille').value; //grace a clic droit->inspecter je sais que newSize est bien egale a la valeur de l'input taille
        $('#prevCom').css('font-size', newSize);
    })
});