javascript - 这个网站如何自定义颜色？

Question

我开始自学网络开发。

我正在尝试为使用该网站的人添加一个选项，以便在创建统计栏时创建自定义颜色。

我找到了一个为徽章做类似事情的网站 - http://streambadge.com

我已经查看了代码，但作为 javascript 的新手，我无法理解它在做什么。我无法存储用户的颜色选择，因为我的网站没有用户登录。所以类似这样的东西会很好。

有人可以解释一下这个网站是如何进行自定义颜色选项的吗？或者是否有一个特定的名称来说明它正在做什么，以便我可以研究它？

谢谢 克里斯

Answer 1

据我了解，您希望在 URL 中存储颜色首选项。除了这些网站通常使用的服务器端脚本之外，还可以使用 URL 参数和 Javascript 的 URL 对象来实现:

//url : https://mywebpage.com/index.html?color=blue;
let url = new URL(location.href);
let color = url.searchParams.get("color");
//returns "blue"

但是，该代码可能不适用于旧版浏览器。如果您希望您的代码适用于 IE8 等，您可能需要手动解析 url:

//url : https://mywebpage.com/index.html?color=blue;
let url = location.href;
let param = "color";
let color = url.split("").splice(url.indexOf(param + "=") + 1 + param.length, url.length-url.indexOf(param + "=") + 1 + param.length).join("");
//returns "blue"

然后您可以使用该信息通过 JS 修改 CSS 代码。例如:

document.body.backgroundColor = color;
document.getElementsByTagName("H1")[0].color = color;
document.getElementById("content").color = color;

至于他们的服务器端代码是如何工作的，无法确定，因为它无法访问，但它可能是类似的东西。