javascript - 颜色仅从颜色选择器更改特定页面的背景

Question

我有一个 html 页面，其中有一个颜色选择器可以更改操作栏的颜色。在这里，action bar 只改变了一次。我希望在所有其他页面中对其进行更改。这是我的代码:

    <h4>Color Picker</h4>
<script>
function changeColor1(id1)
{
  document.getElementById(id1).style.color = "#00BCD4"; // forecolor
  document.getElementById(id1).style.backgroundColor = "#00BCD4"; // backcolor
}


function changeColor2(id2){

  document.getElementById(id2).style.color = "#D32F2F"; // forecolor
  document.getElementById(id2).style.backgroundColor = "#D32F2F"; // backcolor #009688
}

function changeColor3(id3){

  document.getElementById(id3).style.color = "#FFAB00"; // forecolor
  document.getElementById(id3).style.backgroundColor = "#FFAB00"; // backcolor
}

function changeColor4(id4){

  document.getElementById(id4).style.color ="#4CAF50"; // forecolor
  document.getElementById(id4).style.backgroundColor = "#4CAF50"; // backcolor
}  

</script>


<a href="#" onclick="changeColor1('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-info"></button></a>

<a href="#" onclick="changeColor2('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-danger"></button></a>

<a href="#" onclick="changeColor3('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-warning"></button></a>

<a href="#" onclick="changeColor4('myid'); return false;"><button type="button" class="btn btn-sq-xs btn-success"></button></a>   
</div>
<a href="index.html"><h4> Logout</h4</a></p>

当单击现有页面中的颜色时，应该如何使所有其他页面中的颜色动态变化。

Answer 1

其他页面是实际的不同页面还是动态页面(AJAX 或只是隐藏的 div 出现)。

如果您实际上正在导航到其他页面，那么您的脚本不能只在客户端更改这些页面而不调用服务器。可以选择使用存储配色方案的 cookie。然后添加一个脚本，从中获取配色方案并根据它设置操作栏颜色。此脚本必须在每个其他页面的启动时起作用。

如果它们是动态的，您只需将相关元素连接到触发事件即可。

您提供的代码比较片面，让我很难全面分析情况。希望这有帮助!