Question

我有一个html页面，其中有一个颜色选择器可以更改操作栏颜色。此处，操作栏仅更改一次。我希望在所有其他页面中进行更改。这是我的代码：

    <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。然后添加一个从中获取颜色方案的脚本，并根据该脚本设置动作栏颜色。该脚本必须处理每个其他页面的启动。

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

您提供的代码相当偏僻，使我难以完全分析情况。希望这会有所帮助！

颜色仅更改颜色选择器

1 个答案: