Question

我想基于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;
 }

为了使用这个css，我添加了

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

在javascript代码的html <head>标记中。我正在考虑传递'index'的不同值，以便它可以动态生成背景图像。任何人都可以告诉我如何从JavaScript中传递这些值？我正在使用

创建工具提示

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

我想在调用这个createElement之前，我应该设置背景图片。

Answer 1

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

首先，传递参数的方法将在<link>标记中：

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

当页面加载时，浏览器将从您的服务器请求css/my_css.php?index=3页面并使用返回的CSS。

但是，您也在询问是否使用JavaScript设置此值。这表明您希望CSS在整个请求中发生变化。在这种情况下，PHP绝对是错误的技术。

相反，请考虑添加以下类：

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

然后您不需要CSS文件中的任何动态内容。只需一次包含所有四个（或更多）规则，并使用JavaScript更改哪个类适用于该元素。

最后，如果您的目标只是选择随机背景颜色，您可以让PHP选择随机值，无需任何参数，或者根本不需要JavaScript和PHP进行交互。

Answer 2

而不是在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>

此代码循环遍历颜色和背景图像数组，每秒更改一次。它会改变div背景和背景图像的颜色。

Answer 3

我建议你改进部分代码使用：

$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; 
}

使用php和javascript生成动态css

3 个答案: