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

Question

我需要使用 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>

Answer 1

值参数必须是 CSS <color> 每个：

This requires a value string to be passed in as a value argument.

并按照以下方法之一指定：

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

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

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

Why document.execCommand(''backColor'') does not work with css variable while foreColor does?

html

javascript

css

execcommand

css-variables