为什么 document.execCommand(''backColor'') 不适用于 css 变量，而 foreColor 可以？答案

【问题标题】：Why document.execCommand(''backColor'') does not work with css variable while foreColor does?为什么 document.execCommand(''backColor'') 不适用于 css 变量，而 foreColor 可以？
【发布时间】：2018-11-19 22:20:15
【问题描述】：

我需要使用 css 变量 执行document.execCommand('backColor') 命令，但出现了问题。根本没有添加背景样式。 foreColor 按预期工作并使用变量添加颜色样式。我在 Angular 7 环境中执行此操作。

function redBg() {
    document.execCommand('styleWithCSS', true, null);
    document.execCommand('backColor', false, 'var(--red)');
}

function redFg() {
    document.execCommand('styleWithCSS', true, null);
    document.execCommand('foreColor', false, 'var(--red)');
}

.content {
  background: #ccc;
  width: 100%;
}

.button {
  font-size: 20px;
  background: #f00;
  user-select: none;
  margin: 5px;
}

--red: red;

<div class="content" contentEditable="true">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<div class="button" onmousedown="redBg()">Red bg</div>

<div class="button" onmousedown="redFg()">Red fg</div>

【问题讨论】：

标签： javascript html css execcommand css-variables

【解决方案1】：

value 参数必须是 CSS <color> per:

这需要一个值字符串作为值传入论据。

并根据以下方法之一指定：

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

使用自定义 CSS 属性不是 CSS <color>

【讨论】：