将样式背景颜色更改为用户选择的rgb值

Question

我主要关注PHP。我有一个cookie＆＃34; themeColor＆＃34; 我试图让它成为一个用户可以选择一种颜色，并随意改变3 div的背景颜色。目前，我可以使用#menu样式

执行此操作

if (isset($_COOKIE['themeColor'])) {
        $color = urldecode($_COOKIE['themeColor']);

    echo '<script>document.getElementById("menu").style.background="rgb(' . $color . ')"; </script>';
    echo '<script>document.getElementById("main").style.background="rgb(' . $color . ')"; </script>';
    echo '<script>document.getElementById("footer").style.background="rgb(' . $color . ')"; </script>';

    }

其他2个div不会改变颜色。我认为这是一个语法错误，但我现在已经看了几个小时，并希望得到一些帮助

询问任何数据 编辑//为菜单主页和页脚添加html标记

＆＃34; BEGIN FILE header.php＆＃34; - 从#menu开始 -

<div id="menu">
            <h1>Solor Hive</h1>

    </div>
<?php
    if (isset($_COOKIE['themeColor'])) {
        $color = urldecode($_COOKIE['themeColor']);
    echo '<script>document.getElementById("menu").style.background="rgb(' . $color . ')"; </script>';
    echo '<script>document.getElementById("main").style.background="rgb(' . $color . ')"; </script>';       
    }
    if (isset($_POST['logout'])) {
    setcookie('theme', "", time() - 3600);
    setcookie('user', "", time() - 3600);
    header("Refresh:0; url=./index.php");
}




?>
    <div class="main" id="main">
        <div id="content">

＆＃34; END OF FILE header.php＆＃34;

＆＃34; BEGINNING FILE footer.php＆＃34;

            </div>
    </div>

    <div id="footer" class="footer">

<?          if(isset($_COOKIE['user'])) {
    $user = $_COOKIE['user'];
    echo '<div class="profile">';
    echo '<a href="./index.php">My Profile</a>';
    echo '<a href="./people.php">User Search</a>';
    echo '<a href="./chat-room.php">Chat</a>';
    echo '<a href="./ppix.php">My Pictures</a>';
    echo '<a href="./games.php">Games</a>';
    echo '<a href="./tools.php">Tools</a>';
    echo '<a href="./help.php">Help</a></div>';
    echo '<form method="POST" id="logout" action="#">';
    echo '<input type="submit" name="logout" value="logout"/>';

    }

    ?>


        <h4>Made by <a href="http://www.solorside.wordpress.com">Solorside</a></h4>
    </form>
    </div>
    </body>
</html>

＆＃34; colorpicker.php＆＃34;

<? include("./header.php"); 


if (isset($_POST['color'])) {

$rgb = $_POST['color'];

setcookie('themeColor', $rgb, time() + (86400 / 12), "/");

}


?>



<canvas width="512" height="512" id="canvas_picker"></canvas>

<form method="POST" id="colorpicker" Action="#">

<div id="rgb">RGB: <input type="text" name="color" id="color"></input>
</div>

<input type="submit" id="submit" value="Change Theme Color">

</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>


<script type="text/javascript">

var canvas = document.getElementById('canvas_picker').getContext('2d');



var img = new Image();

img.src = './data/image.png';

$(img).load(function(){

canvas.drawImage(img,0,0);

});


$('#canvas_picker').click(function(event){

var x = event.pageX - this.offsetLeft;

var y = event.pageY - this.offsetTop;




var imgData = canvas.getImageData(x, y, 1, 1).data;

var R = imgData[0];

var G = imgData[1];
var B = imgData[2];



var rgb = R + ', ' + G + ', ' + B;
  $('#rgb input').val(rgb);

});



</script>

<? include("./footer.php"); ?>

Answer 1

将您的Javascript / JQuery移到</body>标记之上。

Answer 2

我会在没有JS的情况下尝试，因为当我将值存储在COOKIE上时，对于搜索DOM没有任何意义，我会在正文的顶部应用下一个代码：

<style>
<?php if(isset($_COOKIE['themeColor'])) { ?>
        .bg-color {
           background-color: <?php echo urldecode($_COOKIE['user']); ?>; /* COOKIE */
        }

<?php } else { ?>
        .bg-color {
           background-color: #767577; /* default one */
        }
<?php }  ?>
</style>

因此，我会将bg-color类应用于我想要更改的所需div类，然后在设置cookie时，它将应用背景颜色。