Javascript 为十六进制颜色使用变量

使用HTML/CSS/JavaScript，有没有一种方法可以使用变量来控制十六进制颜色值，所以我可以这样说：color

#variable1，variable2，variable3

，a b c，例如变量12和3是1，2和3，所以颜色代码应该是

#123abc

---

我想我要问的是，如果有意义的话，是否可以用变量代替颜色标识符。谢谢

不，您所描述的内容在CSS中是不可能的。但是可以将颜色存储在javascript变量中并动态更改值

编辑正如其他人指出的那样，某些浏览器的最新版本现在支持变量。话虽如此，我还是建议您少用Sass，以防您需要支持任何旧浏览器

var color1 = "#123abc";
var myElement = document.querySelector("#myDiv");
myDiv.style.backgroundColor = color1;

---

你不能在CSS中使用变量来表示颜色。您可以使用或之类的预处理器来做您想做的事情

---

编辑如其他答案中所述，您可以在CSS中使用变量。此功能非常新，仅适用于超现代的新浏览器。因此，使用上述预处理器仍有好处，因为它与浏览器更兼容，因为它只是转换成标准CSS。

自定义属性定义变量，用var（）符号引用，可用于多种用途。例如，在设计中始终使用一小组颜色的页面可以将颜色存储在自定义属性中，并与变量一起使用：

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

HTML

  <h1 id="foo">Hello</hi>

你好 输出将导致“Hello”为#06c，如上所述

---

请参见另一个未提及的选项，如果您使用PHP，则使用如下PHP变量：

<?php $color = '333444'; ?>
<style type="text/css">
    .class {
        color: #<?php $color; ?>;
    }
</style>

.类{
颜色：#；
}

当您从php服务器代码生成整个样式（无论出于何种目的）时，最好使用此选项

$color = '333444';

echo "
    <style>
        .class {
            color: #$color;
        }
    </style>
";

$color='333444'；
回声“
.类{
颜色：#$color；
}
";

---

除此之外，只需知道您可以做到这一点，但这并不是最好的解决方案。让我们等到CSS4或5，他们可能会在那里添加变量。

是的，这是一个很好的Javascript解决方案。您也可以使用我在回答中讨论过的预处理器。：）你能纠正你的答案吗，因为“在CSS中不可能”的说法是错误的？它在所有浏览器中都不完全受支持，但你可以研究一下。@JoelBanks的可能副本老实说，它们并不难。它们基本上是CSS，具有一些新的语法和一些附加的优点。您必须记住在系统中运行它才能转换回CSS。因此，您可以在Sass或更少的版本中编写它，然后通过系统将其转换回正常的CSS。您可以编写普通的CSS，它工作得很好。我建议用谷歌搜索教程。我想说，他们都很受欢迎。好吧，我来谈谈。你建议在Sass或更少的时候这样做吗？这是一个困难的问题。我一吨也没用过。我觉得Sass更受欢迎。我会调查这两个，看看哪一个更适合你的需要。这完全取决于你喜欢什么和你想做什么。如果答案有帮助，记得接受它：Phaha@TigranPetrossian我不确定有多少浏览器支持Lisa的答案。使用Sass或更少版本的好处是它被转换回CSS，因此它在所有浏览器上都受支持，并且与旧浏览器非常兼容。@JoelBanks当然！很乐意帮忙。大量的解决方案和方法可以做到这一点。Sass和Less都很好，因为它们被转换回CSS，所以它们提供了很多兼容性。这在不同浏览器中的支持程度如何？@Miro不完全如此。我的意思是大多数现代浏览器都是肯定的。但今年只得到主流支持。还是很新很现代。如果你的目标是一个已经有一年历史的浏览器，那么它看起来也不那么兼容。每种方法的优缺点。对于这种方法，需要注意一些事情。@LisaL仍然非常酷，有些事情我不知道。我相信随着时间的推移，这将是一个受欢迎的功能。