Mis proyectos: Agregar o modificar una hoja de estilos usando PHP o JavaScript

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>

</head>

<body>

</body>

</html>

Hoja de estilos externa (css.php)

.testkey

{

font-weight: bold;

color: <? echo "red;"; ?>

}

Salida:

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

<html>

<head>

<!--

.testkey

{

font-family: Verdana;

font-size: 24px;

color: <? echo "green;"; ?>

}

-->

</style>

</head>

<body>

</body>

</html>

Salida:

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

<html>

<head>

<!--

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>

drawCSS();

</script>

</body>

</html>

Salida:

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.