Estoy tratando de cambiar la familia de fuente y tamaño de fuente del texto que aparece en un textarea y un contenedor por la elección de la fuente de la lista, tamaño de la fuente debe ser fijo. También estoy tratando de cambiar el color de fondo cuando una fuente es recogido.

Que es mi código:

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

Cuando lo pruebo en el navegador de la familia de la fuente no cambia en el área de texto. Sólo los cambios en el contenedor. También hago ahora sabes cómo establecer un nuevo tamaño de fuente y el fondo para el contenedor y el textarea cuando la familia de la fuente es recogido.

Agradezco cualquier ayuda chicos!

InformationsquelleAutor Tomala | 2011-10-04

4 Comentarios

  1. 48

    Solución completa de trabajo :

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

    Violín aquí: http://jsfiddle.net/AaT9b/

    • Pura Excelencia.
  2. 5

    En mi opinión, sería una forma más limpia y más fácil solución para poner una clase sobre el cuerpo y el conjunto de la fuente-familia en el css de acuerdo a su clase.

    no sé si esa es una opción en su caso.

    • +1 para ver el bosque por los árboles
    • Creo que el código se necesita para fortalecer el punto de
  3. 1

    En algunos navegadores, las fuentes se establece explícita para los textareas y entradas, así que no se heredan las fuentes de elementos superiores. Así que, creo que usted necesita para aplicar los estilos de fuente para cada área de texto y de entrada en el documento (no sólo el cuerpo).

    Una idea podría ser la de añadir clases para el cuerpo, a continuación, utilizar CSS para el estilo del documento en consecuencia.

  4. 0

    Si sólo desea cambiar el tipo de letra en la caja de texto, a continuación, sólo tiene que cambiar el changeFont() de la función en el código original a:

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

    A continuación, seleccionar una fuente de cambio en la fuente sólo en el TEXTAREA.

Dejar respuesta

Please enter your comment!
Please enter your name here