LESS - Cambiando valores CSS dinámicamente con JS

Oct 16, 2014 9:00:00 AM / by daniel.comas

 

Hoy os mostramos un ejemplo senzillo para cambiar valores en un archivo CSS. Cambiaremos el color de un texto cuando seleccionemos el valor de un desplegable. Para ello utilizaremos LESS. LESS nos permite añadir variables y crear funciones en archivos CSS entre otras cosas.

 

index.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet/less" type="text/css" href="css/StyleSheet.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#selector").change(function () {
less.modifyVars({
'@color': $(this).val()
});
});
});
</script>
</head>
<body>
<select id="selector">
<option value="red">red</option>
<option value="orange">orange</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<div id="header">
Ingens Networks
</div>
<div id="imgCabecera"></div>
</body>
</html>

 

css/StyleSheet.less

 

@color: #f00;

body {
}

#header
{
font-size: 30px;
color: @color;
}

#imgCabecera
{
background: url("../img/logo.png");
width: 250px;
height: 250px;
}

 

Si estáis sobre IIS, en el web.config tendréis que habilitar las peticiones LESS!

 

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent >
</system.webServer>
</configuration>

 

 

Por defecto al ejecutar el sitio web tendremos los valores por defecto. 

 

 

 

Si cambiamos el valor del desplegable nos cambiará el color del título.

 

 

 

Topics: CSS, Dinámicos, LESS, Programación, Valores, JavaScript

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas