这个网站如何做自定义颜色?

Question

我开始自学Web开发。

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

我发现一个网站正在为徽章做类似的事情 - 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;

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