Manual jQuery-Método .css()
miércoles, 15 de diciembre de 2010
, Posted by edukt at 13:20
Método .css()
En algunos casos se necesita aplicar estilos que son dificil de definir en hojas de estilo externas, en esas ocasiones podemos utilizar el método .css() que permite configurar y obtener valores para cualquier propiedad css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" src="ejemplo.js" type="text/javascript"></script>
</head>
<body>
<div id="selector">
<button id="selector-normal">Normal</button>
<button id="selector-grande">+</button>
<button id="selector-pequeño">- </button>
</div>
<div class="discurso">
<p>El DOM es simplemente una ordenación de la estructura en forma de árbol que describe la relación entre los componentes de una página utilizando el concepto padre-hijo. A continuación se presenta un ejemplo con la estructura en árbol del DOM</p>
</div>
</body>
</html>
El archivo ejemplo.js contiene el siguiente código:
$discurso.css('fontSize', num + 'px'); //aplica el nuevo tamaño de la fuente
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" src="ejemplo.js" type="text/javascript"></script>
</head>
<body>
<div id="selector">
<button id="selector-normal">Normal</button>
<button id="selector-grande">+</button>
<button id="selector-pequeño">- </button>
</div>
<div class="discurso">
<p>El DOM es simplemente una ordenación de la estructura en forma de árbol que describe la relación entre los componentes de una página utilizando el concepto padre-hijo. A continuación se presenta un ejemplo con la estructura en árbol del DOM</p>
</div>
</body>
</html>
El archivo ejemplo.js contiene el siguiente código:
$(document).ready(function() {
var $discurso = $('div.discurso');
var defaultSize = $discurso.css('fontSize'); //obtiene el tamaño del texto.$('#selector button').click(function() {
var num = parseFloat( $discurso.css('fontSize'), 10 );//convierte a flotante el valor de tamaño de la fuente.
switch (this.id) {//obtiene el id del div del evento
case 'selector-grande': //aumenta tamaño de la fuente
num *= 1.4;
break;
case 'selector-pequeño'://disminuye tamaño de la fuente
num /= 1.4;
break;
default:// mantiene el tamaño normal de la fuente
num = parseFloat(defaultSize, 10);
}
});
})
Currently have 0 comentarios: