將風格背景顏色更改爲用戶選擇的rgb值

我主要關注PHP。我有一個cookie「themeColor」正試圖讓用戶可以選擇一種顏色並隨意更改3個div的背景顏色。目前，我能夠與#menu風格將風格背景顏色更改爲用戶選擇的rgb值

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不會改變顏色來做到這一點。我想這是一個語法錯誤，但我一直在尋找這幾個小時，希望得到一些幫助

showing that the first js command is executing but the other 2 do not follow

要求任何數據編輯//添加HTML標記主菜單和頁腳

「開頭的文件header.php文件」 - 開始#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">

「FILE的header.php結束」

「文件開頭footer.php」

  </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>

「colorpicker.php」

<? 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"); ?>

來源

2017-01-05 Solorside

張貼您的html標記 – happymacarts

您能否分享菜單，主要和頁腳？ – PMerlet

如果你的顏色存儲在cookie中，那麼使用JS來改變顏色是沒有意義的，爲什麼不把'cookie'作爲'style'打印在所需'div'上？你的方式正在過度。 – Troyer

將你的Javascript/jQuery只是將上述</body>標籤。

來源

2017-01-05 08:18:00 Ruby

它在上面。它下面的代碼是一個單獨的文件 – Solorside

我的意思是你必須在所有的HTML代碼下面添加js - 僅在標籤上方。 – Ruby

我會嘗試沒有JS，因爲對我來說是沒有意義的搜索的DOM時，我有一個COOKIE已存儲的價值，我會申請對身體的頂部下面的代碼：

<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>

因此，我將在需要的div上應用bg-color類，我想要使用該cookie進行更改，然後在設置cookie時將應用背景顏色。

來源

2017-01-05 08:28:30 Troyer

將風格背景顏色更改爲用戶選擇的rgb值

回答

相關問題