Изменение размера и размера шрифта jQuery

Я пытаюсь изменить семейство шрифтов и размер шрифта текста, который появляется в текстовой области и контейнере, выбирая шрифт из списка, размер шрифта должен быть исправлен. Я также пытаюсь изменить цвет фона при выборе шрифта.

Это мой код:

    <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>

Когда я пытаюсь в браузере, семейство шрифтов не изменяется в текстовой области. Он изменяется только в контейнере. Теперь я также знаю, как установить новый размер шрифта и фон для контейнера и текстового поля при выборе семейства шрифтов.

Буду признателен за любую помощь ребятам!

Ответ 1

Полное рабочее решение:

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

Заклинание здесь: http://jsfiddle.net/AaT9b/

Ответ 2

На мой взгляд, было бы более простым и простым решением просто установить класс на теле и установить семейство шрифтов в css в соответствии с этим классом.
не знаю, если это вариант в вашем случае.

Ответ 3

В некоторых браузерах шрифты задаются явно для текстовых полей и входов, поэтому они не наследуют шрифты из более высоких элементов. Поэтому, я думаю, вам нужно применять стили шрифтов для каждого текстового поля и ввода в документе (не только для тела).

Одна идея может заключаться в том, чтобы добавить кланы в тело, а затем использовать CSS для соответствующего стиля документа.

Ответ 4

Если вы хотите изменить шрифт в TEXTAREA, вам нужно только изменить функцию changeFont() в исходном коде на:

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

Затем выбор шрифта будет меняться шрифтом только в TEXTAREA.