gpt4 book ai didi

php - 使用 php 和 javascript 生成动态 css

转载 作者:太空宇宙 更新时间:2023-11-04 00:32:01 24 4
gpt4 key购买 nike

我想根据 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" />

在我的 html 中 <head> javascript代码的标签。我正在考虑传递不同的“索引”值,以便动态生成背景图像。谁能告诉我应该如何从 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 进行交互。

关于php - 使用 php 和 javascript 生成动态 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3056665/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com