Generación de css dinámico utilizando php y javascript

StackOverflow https://stackoverflow.com/questions/3056665

  •  27-09-2019
  •  | 
  •  

Pregunta

Quiero generar información sobre herramientas basadas una imagen de fondo que cambia dinámicamente en css sucesivamente. Este es mi archivo my_css.php. 

<?php
    header('content-type: text/css'); 
    $i = $_GET['index'];
    if($i == 0)
        $bg_image_path = "../bg_red.jpg";   
    elseif ($i == 1)
        $bg_image_path = "../bg_yellow.jpg";   
    elseif ($i == 2)
        $bg_image_path = "../bg_green.jpg";   
    elseif ($i == 3)
        $bg_image_path = "../bg_blue.jpg";    
?>
.tooltip {
            white-space: nowrap;
        color:green;
        font-weight:bold;
            border:1px solid black;;
            font-size:14px;
        background-color:  white;
        margin: 0;
        padding: 7px 4px;
        border: 1px solid black;
        background-image: url(<?php echo $bg_image_path; ?>);
        background-repeat:repeat-x;
        font-family: Helvetica,Arial,Sans-Serif;
        font-family: Times New Roman,Georgia,Serif;
        filter:alpha(opacity=85); 
        opacity:0.85;
        zoom: 1;
 }

Para utilizar esta css I añadió 

<link rel="stylesheet" href="css/my_css.php" type="text/css" media="screen" />

en mi etiqueta html <head> de código JavaScript. Estoy pensando en pasar diferentes valores de 'índice' de modo que generaría la imagen de fondo de forma dinámica. ¿Puede alguien decirme cómo debería pasar estos valores a partir de un javascript? Estoy creando la descripción utilizando 

var tooltip = document.createElement("div");
document.getElementById("map").appendChild(tooltip);
tooltip.style.visibility="hidden";

y creo que antes de llamar a este createElement, debería establecer una imagen de fondo.

¿Fue útil?

Solución

Usted parece estar haciendo dos preguntas completamente independientes.

En primer lugar, la manera de pasar un parámetro sería en su etiqueta <link>: 

<link rel="stylesheet" href="css/my_css.php?index=3" type="text/css" media="screen" />

Cuando se carga la página, el navegador solicitarán la página css/my_css.php?index=3 de su servidor y utilizar el CSS que es retornada.

Sin embargo, también estás preguntando acerca de cómo establecer este valor con JavaScript. Eso sugiere que desea que el CSS para cambiar a lo largo de la solicitud. En ese caso, PHP es absolutamente la tecnología de malo estar usando.

En su lugar, considerar la adición de clases como: 

.tooltip-background-1 {
    background-image: url(../bg_red.jpg);
}

A continuación, no es necesario cualquier contenido dinámico en el archivo CSS. Basta con incluir los cuatro (o más) las normas a la vez, y el uso de JavaScript para el cambio, que la clase se aplica al elemento.

Por último, si objetivo es simplemente elegir un color de fondo al azar, usted podría simplemente dejar PHP elegir el valor aleatorio, lo que elimina cualquier necesidad de un parámetro o JavaScript y PHP para interactuar en absoluto.

Otros consejos

Yo sugeriría para mejorar una parte del código que uso: 

$bg_image_path = '../bg_';
switch($i)
{
   case 0: $bg_image_path .= 'red.jpg';    break; 
   case 1: $bg_image_path .= 'yellow.jpg'; break; 
   case 2: $bg_image_path .= 'green.jpg';  break; 
   case 3: $bg_image_path .= 'blue.jpg';   break; 
}

en lugar de especificar la imagen de fondo en el archivo CSS, trate de hacer todo con JavaScript justo. Así que quitar la imagen de fondo del archivo css y eliminar todo el php y eliminar el color (si eso es lo que desea cambiar cuando cambia la imagen de fondo), básicamente todo lo que necesita cambiar, retirar de la CSS y cambiarlo con JavaScript.

A continuación, utilice un código como este: 

<html>
<head>
<script type="text/javascript">
var i = 0;

var cols = new Array(8);
cols[0] = "FFFFFF";
cols[1] = "EEEEEE";
cols[2] = "DDDDDD";
cols[3] = "CCCCCC";
cols[4] = "BBBBBB";
cols[5] = "AAAAAA";
cols[6] = "999999";
cols[7] = "888888";
cols[8] = "777777";

var imgs = new Array(8);
img[0] = "img1.jpg";
img[1] = "img2.jpg";
img[2] = "img3.jpg";
img[3] = "img4.jpg";
img[4] = "img5.jpg";
img[5] = "img6.jpg";
img[6] = "img7.jpg";
img[7] = "img8.jpg";
img[8] = "img9.jpg";

function change()
{
 document.getElementById("div").bgColor = cols[i];
 document.body.background = img[i];
 i++;
 if(i > 8)
 {
  i=0;
 }
}
</script>
</head>
<body onLoad="setInterval('change()',1000)">
<div id="div">Tooltip</div>
</body>
</html>

Este bucles de código a través de la gama de colores e imágenes de fondo, que va a cambiar una vez por segundo. Cambia el color del fondo divs y la imagen de fondos.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top