domingo, 10 de noviembre de 2013

Como acceder a los valores de las propiedades CSS con Jquery


Bienvenid@s, hoy os mostraré como acceder de un modo sencillo a los valores de las propiedades CSS con Jquery, para ello he creado un ejemplo en el cual hay un box con un texto al cual le he aplicado unos estilos CSS, mediante Jquery accederé al valor de cada una de las propiedades mediante la función css de Jquery y agregando como parámetro el nombre de la propiedad CSS.

Código del ejemplo ...


<!DOCTYPE html>
<html>
<head>
<title>Acceder a los valores de las propiedades CSS con Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
box = $("#box");
FontSize = box.css("font-size");
FontFamily = box.css("font-family");
FontStyle = box.css("font-style");
resultado = "<br>font-size: " + FontSize + "<br>font-family: " + FontFamily + "<br>font-style: " + FontStyle;
$("#resultado").html(resultado);
});
</script>
<style>
#box
{
font-size: 20px;
font-family: verdana;
font-style: italic;
} 
</style>
</head>
<body>
<div id="box">Como acceder por ejemplo a las propiedades que modifican los tipos de fuentes de letra con Jquery</div>
<div id="resultado"></div>
</body>
</html>