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>：

这需要将值字符串作为值传递论点。

，并按照以下任一方法指定：

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

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

为什么document.execCommand（''backColor''）不能与css变量一起使用，而foreColor却可以呢？

1 个答案: