Question

我有这个简单的样式切换器

style.css

    body.defualt {  background-color: RGB(230,197,173);
                background-image:url("img/defualt.gif") ;
                background-repeat: no-repeat ;
                font-family : Lucida Handwriting;
                color : white;
}
body.spring {
                background-image:url("img/spring.png");
                background-repeat: repeat ;
                font-family : Arial Rounded MT Bold;

            }
body.winter{
                background-image:url("img/winter.png");
                background-repeat: repeat ;
                font-family : Comic Sans MS;
                color : RGB(53,31,99);

            }

a   {text-decoration : none;
    color :RGB(175,48,175);
    }
a:hover {text-decoration :underline ;
        text-transform: uppercase;
        }

现在当我改变默认样式时它会改变但是当刷新时，它会回归到defualt 我想知道如何保存我的风格

<?php
     if ($GLOBALS["language"]==arabic)
                            {include ("ar.php");}
                            else {include ("en.php");}

?>
<html >
    <head>
        <title>
            MultiMedia
        </title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="function.js" > </script>
    </head>
    <body class="defualt">
            <br/><br/>
            <!-- header -->
            <!-- MultiMedia -->
            <h1 ><center><?php echo $header ; ?></center></h1>

            <!-- theme selector -->
            <table  style="position:fixed;left:25px;top:210px;" >
                    <tr> <th> <?php echo $choose?><th> <tr/>
                    <tr>
                        <td align=center>
                            <a onclick ="change('defualt');" title="Defualt" ><img src="img/defualtTHM.gif" style="border-color:white;" border=2 /> </a>
                        </td>
                    </tr>
                    <tr>
                        <td align=center>
                            <a onclick ="change('spring');" title="Spring" ><img src="img/springTHM.png" style="border-color:white;" border=2 /> </a>
                        </td>
                    </tr>
                    <tr>
                        <td align=center>
                            <a onclick ="change('winter');" title="Winter" ><img src="img/winterTHM.png" style="border-color:white;" border=2 /> </a>
                        </td>
                    </tr>

Answer 1

将其保留在会话中。

如果您使用的是PHP，请将其发送到您的控制器，然后将该值存储在您的会话中。下次加载PHP文件时，检查会话，如果设置了密钥，则加载该CSS文件，否则加载默认值

switchstyle.php

$style = isset($_GET['style']) ? $_GET['style'] : false;
if ($style) {
   $_SESSION['custom_style'] = $style;
}

在index.php中（假设这是你的观点

if (isset($_SESSION['custom_style'])) {
  //load the style
} else {
  //load default style
}

注意这只是一个示例/建议。您应该验证$ _GET和$ _SESSION检查，以便保持受保护。

Answer 2

您可能希望将语言存储（并设置）为$_SESSION变量，而不是$_GLOBALS变量。

例如，试试这个：

session_start();
$_SESSION['language'] = "arabic";

然后，您可以更改$ _SESSION，只要您在尝试访问或更改任何session_start();变量之前调用$_SESSION，就会跨页面跟踪（仅限该用户）。

Answer 3

如果我们能看到“更改”功能会很好，但我想你需要这个

<script type="text/javascript">
   function change(theme) {
      var date = new Date ();
      date.setDate(date.getDate() + 3); // this theme will stay 3 days
      document.cookie = 'theme=' + theme + '; expires=' + date.toUTCString()
   }
</script>

并在html中

<body class="<?=isset($_COOKIE['theme'])?$_COOKIE['theme']:'default'?>">

带有PHP和CSS的样式切换器

3 个答案: