Como ya sabemos una de las principales funciones de Javascript es la de manipular el contenido de la página. Cuando el desarrollador crea su página utiliza código html para definir los elementos y css para darles el aspecto visual, Javascript en el encargado de modificar todo esto dinamicamente.
Hasta ahora hemos visto cómo recuperar el valor de los atributos y de modificarlo con el método .attr() y .val(), pero también existe un método llamado .css() que nos permite recuperar y modificar los estilos, como por ejemplo el color de la letra.
Supongamos que nosotros tenemos un elemento como éste:
<p id="parrafo"> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </p>
Podemos recuperar, por ejemplo, el valor de la propiedad de css text-decoration, de esta forma:
var text_decoration = $("#parrafo").css('text-decoration');
alert(text_decoration);
Como la etiqueta no tiene definido ningún valor para la propiedad text-decoration entonces debería devolvernos ‘none’.
Además así como podemos recuperar el valor de sus propiedades también podríamos modificarlas:
$("#parrafo").css('text-decoration', 'underline');
Como vemos, si el método .css() recibe un parámetro nos devolverá el valor del mismo, pero si recibe dos modifcará el valor del primer parámetro (propiedad) con el segundo parámetro (valor)
Además al igual que el método .attr() si queremos modificar de a varias propiedades podemos usar un json como parámetro.
Con Json:
$("#parrafo").css({
'text-decoration': 'underline',
'color': '#f00',
'font-weight': 'bold'
});
Sin Json:
$("#parrafo").css('text-decoration', 'underline');
$("#parrafo").css('color', '#f00');
$("#parrafo").css('font-weight', 'bold');
De ambas maneras es válida.
A continuación les mostraré un ejemplo en el que a través de dos select se podrá modificar el color de letra y fondo de una caja div:
<!doctype html>
<html>
<head>
<style type="text/css">
#formato, #contenedor {
width: 500px;
border: solid 1px #000;
margin: 0px auto 0px auto;
padding: 10px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cambiar").click(function(){
var color_letra = $("#color_letra").val();
var color_fondo = $("#color_fondo").val();
$("#contenedor").css({
'color': color_letra,
'background-color': color_fondo
});
});
});
</script>
</head>
<body>
<form id="formato" action="javascript:void(0);">
<label> Color de letra </label>
<select id="color_letra">
<option value="white"> Blanco </option>
<option value="black"> Negro </option>
<option value="blue"> Azul </option>
<option value="red"> Rojo </option>
<option value="green"> Verde </option>
<option value="orange"> Naranja </option>
<option value="violet"> Violeta </option>
</select>
<label> Color de fondo </label>
<select id="color_fondo">
<option value="white"> Blanco </option>
<option value="black"> Negro </option>
<option value="blue"> Azul </option>
<option value="red"> Rojo </option>
<option value="green"> Verde </option>
<option value="orange"> Naranja </option>
<option value="violet"> Violeta </option>
</select>
<input type="button" value="Cambiar" id="cambiar" />
</form>
<div id="contenedor">
<p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </p>
<p> Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
<p> Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. </p>
<p> In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
<p> Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. </p>
</div>
</body>
</html>
Anterior: JQuery, parte 3: Método .attr()
Siguiente: JQuery, parte 5: Selectores