如何在CSS样式表中使用if/else条件?制作动态页面并使用用户通过 PHP 的值时


how to use if/else conditions in css style sheets ? when making a dynamic page and using values from user through php

<!-- this is a style sheet -->
body{
    background: <?php echo $_COOKIE['bg_color'];?>;
    background-image: <?php echo $_COOKIE['bg_img'];?>;
}
<!-- end style sheet -->

在上面的样式表中,我只想要一件事,如果用户给出背景颜色,那么它只显示背景颜色,否则,如果用户提供背景图像,则仅显示图像,为此,我正在使用饼干。

用户只能从背景图像或背景颜色中选择一个选项,请帮助我。谢谢。

<?php
    if(isset($_POST['submit1']) && (isset($_POST['bgcolor']) || isset($_POST['bgimg'])))
    {
        $bg_color = $_POST['bgcolor'];
        setcookie('bg_color', $bg_color, time() + (86400 * 30), '/');
        $bg_img = $_POST['bgimg'];
        setcookie('bg_img', $bg_img, time() + (86400 * 30), '/');
        header("location: page2.php");
    }
?>
<html>
<head>
    <title>Page 1</title>
    <script type="text/javascript">
        function coloroption() 
        {           
            document.getElementById("bg-color").disabled = false;
            document.getElementById("bg-img").disabled = true;
        }   
        function imgoption() 
        {   
            document.getElementById("bg-color").disabled = true;
            document.getElementById("bg-img").disabled = false; 
        }
    </script>
</head>
<body>
    <h1>Make your own web page</h1>
    <form method="POST">
        Background option : 
            <input type="radio" name="background" onclick="coloroption() "/>Use Color
            <input type="radio" name="background" onclick="imgoption()"/>Use Image
        </br></br>
        Chose Color : <input type="color" name="bgcolor" id="bg-color"></br></br>
        Input Image : <input type="file" name="bgimg" id="bg-img"></br></br> 
        <input type="submit" value="Next" name="submit1"/>
    </form>
</body>
</html>

你不能在 css 中使用 if/else 条件,但你可以做的是使用 js 或 php 将类添加到主体,然后使用与该类匹配的 css 选择器并应用所需的属性。

例如,如果 cookie for bg_color 存在,请在正文中添加一类 bg-color,然后在 css 中将其设置为如下:

body.bg-color {
  background: <?php echo $_COOKIE['bg_color'];?>;
}
body.bg-image {
  background-image: <?php echo $_COOKIE['bg_img'];?>;
}

由于您已经在样式表上使用 php,因此您可以有一个条件

<!-- this is a style sheet -->
body{
    <?php 
    if(isset($_COOKIE['bg_color'])){ 
    ?>
        background: <?php echo $_COOKIE['bg_color'];?>;
    <?php
    }
    if(isset($_COOKIE['bg_img'])){
    ?>
        background-image: <?php echo $_COOKIE['bg_img'];?>;
    <?php 
    }
    ?>
}
<!-- end style sheet -->

如果要在任何文件中使用php代码,该文件的扩展名应为 .php 。因此,如果要为正文设置样式,请在 php file中仅编写该部分,然后将其包含在内。

风格.php

body{
    background: "<?php echo $_COOKIE['bg_color'] ? $_COOKIE['bg_color'] : 'defalue value';?>";
    background-image: "<?php echo $_COOKIE['bg_img'] ? $_COOKIE['bg_img'] : 'default value';?>";
}

还要确保用 quotes 包装 php。