时间戳

首页 > 解决方案 > 为什么 document.execCommand(''backColor'') 不适用于 css 变量，而 foreColor 可以？

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

问题描述

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

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>

标签： javascripthtmlcssexeccommandcss-variables

解决方案

value 参数必须是一个 CSS <color>per：

这需要将值字符串作为值参数传入。

并按以下方法之一指定：

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

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

推荐阅读