所有頁面的背景顏色相同

我想讓客戶選擇一種顏色，然後當他轉到其他頁面時，顏色保持不變。這是在第一頁上的選擇顏色代碼：所有頁面的背景顏色相同

 <select id="color" style="width: 5%; height: 10%" size="5"> 
     <option value="white">White</option> 
     <option value="red">Red</option> 
     <option value="yellow">Yellow</option> 
     <option value="blue">Blue</option> 
     <option value="green">Green</option> 
    </select> 
    <script> 

     document.getElementById("color").onchange = function() { 
      document.body.style.background = this.options[this.selectedIndex].value; 
     }

來源

2015-01-26 nirds32

您必須爲我們e服務器端語言或cookie。 – 2015-01-26 19:00:48

使用Cookie或服務器端會話進行調查。 – Axel 2015-01-26 19:01:05

只需將它附加到新的url，並讓你的js解析url。 – theonlygusti 2015-01-26 19:01:19

這似乎是一個很好的用例localStorage：

document.querySelector('#color').addEventListener('change', function() { 
    document.body.style.background = this.value; 
    localStorage.setItem('appColor', this.value); 
}); 

document.body.style.background= localStorage.getItem('appColor');

看到這個Fiddle。每次選擇一種顏色時，都會記住它，並在下次運行時作爲默認顏色。

附註：您可以簡化這個：

this.options[this.selectedIndex].value;

＆hellip;爲此：

this.value;

來源

2015-01-26 19:17:53

感謝它的工作，如果我有多個頁面，我想要在其他頁面上應用所選的顏色。我該怎麼做？ – nirds32 2015-01-26 19:56:29

在每個頁面上，添加以下行：'document.body.style.background = localStorage.getItem（'appColor'）;' – 2015-01-26 19:58:19

這應該是你的腳本：

<body onload="OnLoad()"> //onLoad: run the function OnLoad() when the body is being load 
    <select id="color" style="width: 5%; height: 10%" size="5"> 
     <option value="white">White</option> 
     <option value="red">Red</option> 
     <option value="yellow">Yellow</option> 
     <option value="blue">Blue</option> 
     <option value="green">Green</option> 
    </select> 

    <script> 
    function OnLoad() { 
     document.getElementById("color").onchange = function() { //Getting the background color from the select 
      document.body.style.background = this.options[this.selectedIndex].value; //Setting the background color 
      document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value; //Storing in a cookie named: WebBackgroundColor the color that was chosen 
     } 
     var color = getCookie("WebBackgroundColor"); //Getting the color stored on the cookie 
     document.body.style.background = color; //Setting the background color to the same color as stored in the cookie 
    } 

    function getCookie(cname) { 
     var name = cname + "="; 
     var ca = document.cookie.split(';'); 
     for(var i=0; i<ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0)==' ') c = c.substring(1); 
      if (c.indexOf(name) == 0) return c.substring(name.length,c.length); 
     } 
     return ""; 
    } 
    </script> 
</body>

要添加此腳本，您需要將身體從改變其他網頁：<body>到<body onload="OnLoad()">

，你需要添加頁面底部的所有腳本（或標題部分）：

<script> 
    function OnLoad() { 
     document.getElementById("color").onchange = function() { //Getting the background color from the select 
      document.body.style.background = this.options[this.selectedIndex].value; //Setting the background color 
      document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value; //Storing in a cookie named: WebBackgroundColor the color that was chosen 
     } 
     var color = getCookie("WebBackgroundColor"); //Getting the color stored on the cookie 
     document.body.style.background = color; //Setting the background color to the same color as stored in the cookie 
    } 

    function getCookie(cname) { 
     var name = cname + "="; 
     var ca = document.cookie.split(';'); 
     for(var i=0; i<ca.length; i++) { 
      var c = ca[i]; 
      while (c.charAt(0)==' ') c = c.substring(1); 
      if (c.indexOf(name) == 0) return c.substring(name.length,c.length); 
     } 
     return ""; 
    } 
    </script>

來源

2015-01-26 19:18:57 morha13

感謝它的工作，如果我有多個頁面，並且我想將所選顏色應用於其他頁面。我該怎麼做？ – nirds32 2015-01-26 19:55:50

@ nirds32更新了答案。它工作嗎？ – morha13 2015-01-26 20:00:27

這是工作，但我希望在第一頁上選擇的顏色將適用於其他頁面，如@Rick Hitchcock的回答 – nirds32 2015-01-27 14:32:15

所有頁面的背景顏色相同

回答

相關問題