所有页面的背景颜色相同

我想让客户选择一种颜色，然后当他转到其他页面时，颜色保持不变。这是在第一页上的选择颜色代码：所有页面的背景颜色相同

 <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

所有页面的背景颜色相同

回答

相关问题