使用php和javascript生成动态CSS

问题描述：

我想基于CSS中动态变化的背景图像生成工具提示。这是我的my_css.php文件。使用php和javascript生成动态CSS

<?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我在JavaScript代码的HTML标签<head>添加

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

。我正在考虑传递'索引'的不同值，以便它动态生成背景图像。任何人都可以告诉我，我应该如何从JavaScript传递这样的值？我创建使用

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

的提示，我想调用此之前的createElement，我应该设置背景图片。

答

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

首先，传递参数的方法是在你的<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进行交互。

感谢您的回答VoteyDisciple。如果我需要在整个请求中更改CSS，应该如何处理它？ – 2010-06-17 13:55:39

答

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

此代码循环的颜色和背景图像中的阵列，将每秒一次变化。它改变了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; 
}

使用php和javascript生成动态CSS

相关推荐