Fatal编程技术网
  • php/
  • 使用php和javascript生成动态css

使用php和javascript生成动态css

php javascript

使用php和javascript生成动态css,php,javascript,dynamic-css,Php,Javascript,Dynamic Css,我想根据css中动态变化的背景图像生成工具提示。 这是我的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"; e

我想根据css中动态变化的背景图像生成工具提示。 这是我的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;
 }
我想在调用这个createElement之前，我应该设置背景图像

你似乎在问两个完全独立的问题

首先，传递参数的方法是在
标记中：

<link rel="stylesheet" href="css/my_css.php?index=3" type="text/css" media="screen" />
这样，CSS文件中就不需要任何动态内容了。只需一次包含所有四个（或更多）规则，并使用JavaScript更改应用于元素的类

最后，如果您的目标只是选择一个随机背景颜色，那么您可以让PHP选择随机值，这样就不需要任何参数，也不需要JavaScript和PHP进行交互。

您似乎在问两个完全独立的问题

首先，传递参数的方法是在
标记中：

<link rel="stylesheet" href="css/my_css.php?index=3" type="text/css" media="screen" />
这样，CSS文件中就不需要任何动态内容了。只需一次包含所有四个（或更多）规则，并使用JavaScript更改应用于元素的类

最后，如果您的目标只是选择一个随机的背景颜色，那么您可以让PHP选择随机值，这样就不需要任何参数，也不需要JavaScript和PHP进行交互。

不要在css文件中指定背景图像，试着用JavaScript来完成这一切。因此，从css文件中删除背景图像，删除所有php并删除颜色（如果背景图像更改时您希望更改颜色），基本上您需要更改的任何内容，从css中删除并使用JavaScript进行更改

然后使用如下代码：

<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>


var i=0；
var cols=新数组（8）；
cols[0]=“FFFFFF”；
cols[1]=“EEEEEE”；
cols[2]=“DDDDDD”；
cols[3]=“中交”；
cols[4]=“BBBBBB”；
cols[5]=“AAAAA”；
cols[6]=“99999”；
cols[7]=“888888”；
cols[8]=“777777”；
var-imgs=新阵列（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”；
函数更改（）
{
document.getElementById（“div”）.bgColor=cols[i]；
document.body.background=img[i]；
i++；
如果（i>8）
{
i=0；
}
}
工具提示
此代码在颜色和背景图像数组中循环，每秒更改一次。它会更改divs背景和背景图像的颜色。

不要在css文件中指定背景图像，尝试使用JavaScript完成所有操作。因此，从css文件中删除背景图像，删除所有php并删除颜色（如果背景图像更改时您希望更改颜色），基本上您需要更改的任何内容，从css中删除并使用JavaScript进行更改

然后使用如下代码：

<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>


var i=0；
var cols=新数组（8）；
cols[0]=“FFFFFF”；
cols[1]=“EEEEEE”；
cols[2]=“DDDDDD”；
cols[3]=“中交”；
cols[4]=“BBBBBB”；
cols[5]=“AAAAA”；
cols[6]=“99999”；
cols[7]=“888888”；
cols[8]=“777777”；
var-imgs=新阵列（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”；
函数更改（）
{
document.getElementById（“div”）.bgColor=cols[i]；
document.body.background=img[i]；
i++；
如果（i>8）
{
i=0；
}
}
工具提示
此代码在颜色和背景图像数组中循环，每秒更改一次。它会更改divs背景和背景图像的颜色。

我建议您改进代码的一部分，使用：

$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; 
}
我建议您改进代码的一部分，使用：

$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; 
}
谢谢你的回答。如果我需要在整个请求过程中更改CSS，我应该怎么做？感谢VoteyDisciple的回答。如果我需要在整个请求中更改CSS，我应该如何进行？