Question

我正在尝试更改多个页面上的背景和文本的颜色，而不仅仅是一个。

底部的代码可以更改一页上的颜色和文字，但不会进入其他页面。我如何对所有网页进行操作，而不是每次都在每个页面上进行。我在Notepad ++中创建它并在Xampp中运行它。

  <!DOCTYPE HTML>
<html lang="en">
  <head>
  <script> 
localStorage.setItem('backgroundcolours', 'bgc.options[selectedIndex].value');
localStorage.setItem('myBackgroundColor', '#000088');}
 retrrievecolour() {
var changingText = document.getElementById('changemytext');
var changingbackground = document.getElementById('changemybg');

changingText.style.color = localStorage.backgroundcolours;
changingBackground.style.backgroundColor = localStorage.myBackgroundColor;}</script>
<script language="JavaScript" type="text/javascript">

</script>
  <script src="js/scripts.js"></script>
  <meta charset="utf-8">
  <title>Home page </title>
<div id='changemybg'><div id='changemytext'>
 <script !type="text/javascript" charset="utf-8"></script>

<a class="active" href="Homepage.html">dif</a>
<a class="active" href="newtest.html">Home </a>
<a class="active" href="test.html">test </a>
 </head>

<body>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 <form name=backgroundcolour>Background<br><select NAME=backgroundcolouring size= 1
onChange="document.getElementById('changemybg').style.background=backgroundcolouring.options[selectedIndex].value"> 
    <option VALUE="#FFFFFF">White </option> 
    <option VALUE="#F0F0FF">Light Blue </option> 
    <option VALUE="#FFFFD4">Light Yellow </option> 
    <option VALUE="#EEEEEE">Light Gray </option> 
</select></form></td>
<td align="center"><form name=textcolours>Text<br><select NAME=textcolour size=1
onChange="document.getElementById('changemytext').style.color=textcolour.options[selectedIndex].value"> 
    <option VALUE="#000000">Black </option> 
    <option VALUE="#444444">Charcoal </option> 
    <option VALUE="#000088">Dark Blue </option> 
    <option VALUE="#117722">Dark Green </option>
</select></form></td>
</tr></table>
</body>
</html>

Answer 1

color: #FFFFFF;和background-color: #000088等CSS样式是简单的名称 - 值配对，因此您可以直接使用 HTML5 localStorage 。

设置值：

localStorage.setItem('myColor', '#FFFFFF');
localStorage.setItem('myBackgroundColor', '#000088');

要检索值：

var changingText = document.getElementById('changemytext');
var changingbackground = document.getElementById('changemybg');

changingText.style.color = localStorage.myColor;
changingBackground.style.backgroundColor = localStorage.myBackgroundColor;

如何将颜色更改应用于所有HTML页面

1 个答案: