Menubar

martes, 14 de junio de 2016

Agregar o modificar una hoja de estilos usando PHP o JavaScript

Share on Facebook Tweet Share on Google+ Submit to Reddit Send email
Por J. Manuel Mar H.
Archivo .css En ocasiones queremos modificar una hoja de estilos al vuelo (es decir mientras se despliega la página web), ¿cómo podemos hacerlo usando PHP o JavaScript?
  A continuación mostrare algunos ejemplos de como podemos crear/modificar nuestra hoja de estilos usando PHP y JavaScript, tanto para un archivo externo como para hojas de estilo incrustadas directamente en nuestro archivo base.


Enlazando una hoja de estilo que se modifica al vuelo:

<html>
<head>
<title>test css</title>
<link href="css.php" rel="stylesheet" type="text/css" />
</head>
<body>

<font class="testkey">this is a test</font>
</body>
</html>

Hoja de estilos externa (css.php)

.testkey
{
  font-weight: bold;
  color: <? echo "red;"; ?>

}

Salida:
Salida CSS






Modificando una hoja de estilos incrustada en nuestro documento (usando PHP):

<html>
<head>
<title>test css</title>
<style type="text/css" />
<!--

.testkey
{
  font-family: Verdana;
  font-size: 24px;
  color: <? echo "green;"; ?>

}

-->
</style>
</head>
<body>

<font class="testkey">this is a test</font>
</body>
</html>

Salida:
Salida CSS






Modificando una hoja de estilos incrustada en nuestro documento (usando JavaScript):

<html>
<head>
<title>test css</title>
<script language="JavaScript">
<!--

function drawCSS()
{
document.write('<style type="text/css" />');
document.write('<!--');
document.write('.testkey');
document.write('{');
document.write('background-color: yellow;');
document.write('color: purple;');
document.write('}');
document.write('-->');
document.write('</style>');
}

-->
</script>
</head>
<body>

<script language="JavaScript">
drawCSS();
</script>

<font class="testkey">this is a test</font>
</body>
</html>

Salida:
Salida CSS






Conclusión: Es posible modificar las entradas o llaves de una hoja de estilos, ya sea que nuestro archivo enlazado se encuentre en el lenguaje PHP, o bien modificando las entradas al vuelo directamente desde PHP o usando JavaScrip sin tener que reescribir por completo nuestra hoja de estilo.

Procedencia de las imágenes:
File: Icono archivo CSS
http://www.ctec.com.ar/Images/cursos_images/curso_hojas_de_estilo_css.png


¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.


publicidad:
Compartir:
Temas relacionados:
Caritas para las respuestas:
Escriba el código en la respuesta para insertar divertidas caritas en sus respuestas.
:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] ~X( :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^

No hay comentarios.:

Publicar un comentario

Danos tu voto
Comunidad Kynamio
Directorio de blogs, ¡agrega el tuyo!
Programas para el mantenimiento de Windows
Blog de seguridad informatica