如何使用 javascript 更改网页上的十六进制颜色？

【问题标题】：How can I change a hex color on a webpage with javascript?如何使用 javascript 更改网页上的十六进制颜色？
【发布时间】：2022-01-22 06:15:17
【问题描述】：

我正在编写一个网络扩展程序（Chrome、Firefox），我想知道什么 JavaScript 会用不同的颜色替换样式元素的颜色。有一个样式部分有

<style> --toolbar-bg-color: #0087FF; </style>

我想让它只是一个白色背景 (#FFFFFF)。是否有一个简单的 JavaScript 命令可以做到这一点？

【问题讨论】：

您可以查找使用此 CSS 变量的元素并将该变量修改为元素的内联样式。例如document.querySelector('.your-element').style.setProperty('--toolbar-bg-color', '#fff');

【解决方案1】：

如果父元素有一个 id，你可以这样做：

let element = document.getElementById('parentElement');
element.style['--toolbar-bg-color'] = '#FFFFFF';

试试看，告诉我结果如何:)

【讨论】：

我很难找到父元素 ID，叹息。该页面位于 cryptpad.fr/drive 这让我很感兴趣，因为它是 Google Docs/Sheets 的一个非常私密的替代品，但它们的浅蓝色配色方案没有吸引力，所以我试图找到一种方法来替换蓝色背景白色或非常浅的灰色，更像 Google 文档/表格。如果有人有兴趣查看它，您只需输入随机用户名和随机密码以供访客访问，无需电子邮件。