jQuery modification de la famille et de la taille de la police
j'essaie de changer la famille de police et la taille de police du texte qui apparaît dans un textarea et un conteneur en choisissant la police de la liste, la taille de police doit être corrigée. J'essaye aussi de changer la couleur de l'arrière-plan lorsqu'une police est repris.
C'est mon code:
<script type="text/javascript">
function changeFont(_name) {
document.body.style.fontFamily = _name;
document.textarea = _name;
}
</script>
</head>
<body style="font-family">
<form id="myform">
<input type="text" />
<button>erase</button>
<select id="fs" onchange="changeFont(this.value);">
<option value="arial">Arial</option>
<option value="verdana">Verdana</option>
<option value="impact">Impact</option>
<option value="'ms comic sans'">MS Comic Sans</option>
</select>
<div align="left">
<textarea style="resize: none;" id="mytextarea"
cols="25" rows="3" readonly="readonly" wrap="on">
Textarea
</textarea>
<div id='container'>
<div id='float'>
<p>This is a container</p>
</div>
</form>
</body>
quand je l'essaie dans le navigateur, la famille de polices ne change pas dans la zone de texte. Il modifie uniquement dans le récipient. Je sais aussi maintenant comment définir une nouvelle taille de police et un arrière-plan pour le conteneur et la textarea lorsque la famille font est choisi.
je vais apprécier l'aide les gars!
4 réponses
solution de travail complète:
HTML:
<form id="myform">
<button>erase</button>
<select id="fs">
<option value="Arial">Arial</option>
<option value="Verdana ">Verdana </option>
<option value="Impact ">Impact </option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="size">
<option value="7">7</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</form>
<br/>
<textarea class="changeMe">Text into textarea</textarea>
<div id="container" class="changeMe">
<div id="float">
<p>
Text into container
</p>
</div>
</div>
jQuery:
$("#fs").change(function() {
//alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
Violon ici: http://jsfiddle.net/AaT9b/
à mon avis, ce serait une solution plus propre et plus facile de simplement mettre une classe sur le corps et de mettre la font-famille dans css en fonction de cette classe.
ne sais pas si c'est une option dans votre cas.
dans certains navigateurs, les polices sont définies explicitement pour les textareas et les inputs, de sorte qu'elles n'héritent pas des polices des éléments supérieurs. Donc, je pense que vous devez appliquer les styles de police pour chaque textarea et entrée dans le document aussi bien (pas seulement le corps).
une idée pourrait être d'ajouter des clases au corps, puis d'utiliser CSS pour le style du document en conséquence.
si vous voulez seulement changer la police dans le TEXTAREA alors vous n'avez qu'à changer la fonction changeFont() dans le code original en:
function changeFont(_name) {
document.getElementById("mytextarea").style.fontFamily = _name;
}
ensuite, sélectionner une police changera sur la police seulement dans le TEXTAREA.