Cambiar el tamaño de fuente en función del párrafo con Javascript
mar092009

Tags

Related Posts

Share This

Cambiar el tamaño de fuente en función del párrafo con Javascript

cambiar font-size con javascript

cambiar font-size con javascript

En diseño web cada vez encontramos más diseños en los que se combinan distintos tamaños de fuente. Esta práctica tan utilizada en diseño impreso, ahora y quizás debido a los blogs, se ve reflejada en muchos de los mejores diseños que vemos por la red.
Echando un vistazo a CSSTricks he encontrado un interesantísimo artículo en el que nos cuentan como cambiar el tamaño de la fuente de un párrafo en función de la cantidad de letras que contiene.

Chri Coyier, el autor de esta idea, nos cuenta cómo hacerlo usando javascript y nos deja dos ejemplos, uno usando Mootools y el otro usando jQuery.

A continuación os dejo los dos ejemplos, y os recomiendo que echéis un vistazo al post, porque de los comentarios también podréis aprovechar más de una idea que simplifica el código.

COLABORA PARA QUE PODAMOS SEGUIR OFRECIENDO TE CONTENIDO GRATIS !!!

MOOTOOLS:
window.addEvent('domready',function() {
$quote = $$('.post p')[0];
var $numWords = $quote.get('text').split(' ').length;
if (($numWords >= 1) && ($numWords < 10)) {
$quote.setStyle('font-size','36px');
}
else if (($numWords >= 10) && ($numWords < 20)) {
$quote.setStyle('font-size','32px');
}
else if (($numWords >= 20) && ($numWords < 30)) {
$quote.setStyle('font-size','28px');
}
else if (($numWords >= 30) && ($numWords < 40)) {
$quote.setStyle('font-size','24px');
}
else {
$quote.setStyle('font-size','20px');
};
});

jQUERY:
$(function(){
var $quote = $(".post p:first");
var $numWords = $quote.text().split(" ").length;
if (($numWords >= 1) && ($numWords < 10)) {
$quote.css("font-size", "36px");
}
else if (($numWords >= 10) && ($numWords < 20)) {
$quote.css("font-size", "32px");
}
else if (($numWords >= 20) && ($numWords < 30)) {
$quote.css("font-size", "28px");
}
else if (($numWords >= 30) && ($numWords < 40)) {
$quote.css("font-size", "24px");
}
else {
$quote.css("font-size", "20px");
}
});

EJEMPLOS:

Comparte este Blog de Diseño Web

Share and Enjoy