viernes, 18 de mayo de 2012

Estilo con css Jquery


Estilos con css

Jquery nos ofrece una función llamada css(), css (Cascading Style Sheets) que es los mismo que "hojas de estilo en cascada" nos da la opción de aplicar estilos CSS a los elementos de la página web.

La sintaxis es bien sencilla ...

$("#caja").css({color: "blue", backgroundColor: "red", fontStyle: "italic", fontFamily: "arial"});

Veamos un ejemplo de como aplicar estilos a un elemento con Jquery ...
Bienvenidos al Manual Jquery


El código es el siguiente...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$("#caja").css({
width: "200px", 
height: "15px", 
backgroundColor: "yellow", 
borderStyle: "solid", 
borderColor: "blue", 
borderWidth: "3px",
fontFamily: "Verdana",
padding: "20px",
fontSize: "12px",
textAlign: "center",
color: "blue"
});
});
</script>
</head>
<body>
<div id="caja">Bienvenidos a Jquery Manual</div>
</body>
</html>