web-dev-qa-db-fra.com

jQuery change de famille de police et de taille de police

J'essaie de changer la famille de police et la taille de police du texte qui apparaît dans une zone de texte et un conteneur en choisissant la police dans la liste. J'essaie également de changer la couleur de l'arrière-plan lorsqu'une police est sélectionnée. 

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>

Lorsque j'essaie dans le navigateur, la famille de polices ne change pas dans la zone de texte. Cela change seulement dans le conteneur. Je sais aussi maintenant comment définir une nouvelle taille de police et un nouvel arrière-plan pour le conteneur et la zone de texte lorsque la famille de polices est sélectionnée. 

Je vais apprécier toute aide les gars!

jqueryfonts
26
Tomala

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");
});

Fiddle here: http://jsfiddle.net/AaT9b/

45
Benjamin Crouzier

À mon avis, il serait plus simple et plus simple de définir une classe sur le corps et de définir la famille de polices en css en fonction de cette classe.
Je ne sais pas si c'est une option dans votre cas cependant.

5
Andy

Dans certains navigateurs, les polices sont définies explicitement pour les zones de texte et les entrées, elles ne doivent donc pas hériter des polices des éléments supérieurs. Je pense donc que vous devez appliquer les styles de police pour chaque zone de texte et les saisir également dans le document (pas uniquement le corps).

Une idée pourrait être d’ajouter des classes au corps, puis d’utiliser CSS pour styliser le document en conséquence.

1
David Hellsing

Si vous souhaitez uniquement modifier la police dans TEXTAREA, il vous suffit de modifier la fonction changeFont () dans le code d'origine en:

function changeFont(_name) {
    document.getElementById("mytextarea").style.fontFamily = _name;
}

Ensuite, sélectionner une police ne changera que dans la TEXTAREA.

0
tom