одинаковый цвет фона для всех страниц

Я хочу, чтобы клиент выбрал цвет, а затем, когда он перейдет на другую страницу, цвет останется неизменным. это код, выбор цвета на первой странице:одинаковый цвет фона для всех страниц

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

Изучите использование файлов cookie или сеансов на стороне сервера. – Axel

Просто добавьте его в новый URL-адрес и попросите js разобрать URL-адрес. – theonlygusti

Это кажется хорошим прецедентом для 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. Каждый раз, когда вы выбираете цвет, он запоминается и будет цветом по умолчанию при следующем запуске.

Side Примечание: Вы можете упростить это:

this.options[this.selectedIndex].value;

& hellip; к этому:

this.value;

источник

2015-01-26 19:17:53

Спасибо, что это работа, и если у меня есть несколько страниц, и я хочу применить выбранный цвет на других страницах. Как мне это сделать? – nirds32

На каждой странице добавьте эту строку: 'document.body.style.background = localStorage.getItem ('appColor');' –

Это должен быть ваш скрипт:

<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

@ nirds32 обновленный ответ. Работает? – morha13

Это работа, но снова я хотел, чтобы цвет, выбранный на первой странице, применим к другим страницам, например, к ответу @Rick Hitchcock – nirds32

одинаковый цвет фона для всех страниц

ответ

Смежные вопросы