jquery - color - font awesome svg
jQuery cambiando la familia y el tamaño de la fuente (4)
Estoy tratando de cambiar la familia de fuentes y el tamaño de la fuente del texto que aparece en un área de texto y un contenedor al elegir la fuente de la lista, el tamaño de la fuente debería ser fijo. También estoy intentando cambiar el color del fondo cuando se selecciona una fuente.
Ese 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 intento en el navegador, la familia de fuentes no cambia en el área de texto. Solo cambia en el contenedor. Ahora también sé cómo establecer un nuevo tamaño de fuente y fondo para el contenedor y el área de texto cuando se selecciona la familia de fuentes.
Apreciaré cualquier ayuda chicos!
En algunos navegadores, las fuentes se establecen explícitamente para las áreas de texto y las entradas, por lo que no heredan las fuentes de elementos superiores. Por lo tanto, creo que necesita aplicar los estilos de fuente para cada área de texto y la entrada en el documento también (no solo el cuerpo).
Una idea podría ser agregar clases al cuerpo y luego usar CSS para diseñar el documento en consecuencia.
En mi opinión, sería una solución más limpia y fácil simplemente establecer una clase en el cuerpo y establecer la familia de fuentes en css de acuerdo con esa clase.
No sé si esa es una opción en tu caso.
Si solo desea cambiar la fuente en TEXTAREA, solo necesita cambiar la función changeFont () en el código original para:
function changeFont(_name) {
document.getElementById("mytextarea").style.fontFamily = _name;
}
Luego, al seleccionar una fuente, la fuente cambiará solo en TEXTAREA.
Solución de trabajo completa:
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 aquí: http://jsfiddle.net/AaT9b/