Question

我想在我的网站上添加一个功能，点击红色图像会将整个页面的文本变成红色，其他颜色依此类推。我尝试执行下面的代码，但它只更改了 <h> 之间设置的颜色，但不更改 <div> 中的文本或在 css 中设置的样式。对不起，如果它有点混乱。我刚开始。

<body text="<?PHP echo $_SESSION["textcolor"]; ?>">
<ul>
<li><a href='change_color.php?w=1'><img src='images/black.png'></a></li>
<li><a href='change_color.php?w=2'><img src='images/blanched_almond.png'></a></li>
<li><a href='change_color.php?w=3'><img src='images/orange.png'></a></li>
<li><a href='change_color.php?w=4'><img src='images/dark_red.png'></a></li>
</ul>
</body>

change_color.php

<?PHP
session_start();
$w = $_GET['w'];
switch ($w)
{
    case 1:
        $_SESSION["textcolor"] = "#00000";
    break;
    case 2:
        $_SESSION["textcolor"] = "#ffebcd";
    break;
    case 3:
        $_SESSION["textcolor"] = "ffa500";
    break;
    case 4:
        $_SESSION["textcolor"] = "8b0000";
    break;
}
echo "<script>window.history.back()</script>";
?>

Answer 1

我只是采用这种方式，这不是我认为的最佳方式，但我想它对您有用。还要注意在 css 中使用 '!important' 的地方。

"spring-profile.properties"

Answer 2

文本颜色可以通过 color CSS 属性设置（body 元素 text 属性已弃用，使用效率低下） - 最好在 body元素本身，因此每个子节点都通过 CSS 继承样式。

我绝对不是 PHP 专家，但我相信将值从 PHP 回显为内联值的正确方法应该可以满足您的需求：

<body style="color: <?php echo($_SESSION['textcolor']);?>">...</body>

编辑

如果您想让它更加用户友好，您可以添加客户端 JavaScript 来为您处理颜色更改。您的 HTML 和 JavaScript 代码如下所示（请参阅下面的工作演示）：

<ul>
  <li><a href="#" data-col="#000000">Black</a></li>
  <li><a href="#" data-col="#ff0000">Red</a></li>
  <li><a href="#" data-col="#00ff00">Green</a></li>
  <li><a href="#" data-col="#0000ff">Blue</a></li>
</ul>

<hr />
<h1>Change colours using the links - without browser refresh!</h1>
<p>Authoritatively target ethical imperatives for customer directed meta-services. Professionally implement robust platforms through user-centric niches.</p>
<div>This is some text inside a div</div>

<script>
  const links = Array.from(document.querySelectorAll('a[data-col]'));
  links.forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      document.body.style.color = link.getAttribute('data-col');
    });
  });
</script>

此代码适用于任何现代浏览器 - 无需服务器，因为您的单个静态 HTML 可以自行运行，甚至可以在文件系统上运行。

Answer 3

PHP 逐行检查您的代码。您在第 1 行发送变量 $_SESSION["textcolor"]，但在下面进一步设置了一个值。这就是颜色标签为空的原因。您只需要在 HTML 代码之前编写 PHP 代码，如下所示：

<?PHP session_start(); $w=$_GET['w']; switch($w) { case 1:$_SESSION["textcolor"]="#00000";break; case 2:$_SESSION["textcolor"]="#ffebcd";break; case 3:$_SESSION["textcolor"]="ffa500";break; case 4:$_SESSION["textcolor"]="8b0000";break; } echo "<script> window.history.back()</script>"; ?> <body text="<?PHP echo $_SESSION["textcolor"];?>"> <ul> <li><a href='change_color.php?w=1'><img src='images/black.png'></a></li> <li><a href='change_color.php?w=2'><img src='images/blanched_almond.png'></a></li> <li><a href='change_color.php?w=3'><img src='images/orange.png'></a></li> <li><a href='change_color.php?w=4'><img src='images/dark_red.png'></a></li></div> </ul> </body>

~~我测试过，效果很好。 :D~~

我刚刚意识到这是两个单独的文件。解决方案是在每个使用 $_SESSION 变量的文件中初始化会话，如下所示：

<body text="<?PHP session_start(); echo $_SESSION["textcolor"];?>">

编辑：您应该修复的另一件事是，当未设置 w 搜索参数时，您的程序会显示警告。你可以通过替换这个来解决这个问题：

$w=$_GET['w'];
switch($w)
{
    case 1:$_SESSION["textcolor"]="#00000";break;
    case 2:$_SESSION["textcolor"]="#ffebcd";break;
    case 3:$_SESSION["textcolor"]="ffa500";break;
    case 4:$_SESSION["textcolor"]="8b0000";break;
}

这样：

if (isset($_GET['w'])) {
  $w=$_GET['w'];
  switch($w)
  {
    case 1:$_SESSION["textcolor"]="#00000";break;
    case 2:$_SESSION["textcolor"]="#ffebcd";break;
    case 3:$_SESSION["textcolor"]="ffa500";break;
    case 4:$_SESSION["textcolor"]="8b0000";break;
  }
}

它只检查是否设置了 w，如果没有设置，则跳过 switch 语句。

还有一件事：评论说 text 不是有效的 HTML 属性。它很古老，你不应该把它用于更多的闲逛或测试，but it is a property (see the Properties section)。

如何使图像点击更改所有文本颜色？

3 个答案: