Javascript HTML JS文本编辑器

我正在尝试创建一个非常简单的html文本编辑器。 我已经使用了上下文菜单功能，一旦用户在屏幕上突出显示的文本上进行选择，就会有不同的格式选项，并且会附加一个span标记

这就是我所拥有的

function StyleChange(property) {
    var span = document.createElement("span");
    span.style.color = property;

    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

这适用于更改突出显示文本的颜色。 我想做的是，在调用该函数时，通过传递一个额外的参数，可以使用该函数更改文本的任何样式格式。 因此，当它被调用时，它会这样说。StyleChange（'颜色'，红色）或StyleChange（'背景'，'黄色'）

差不多

function StyleChange(style,property) {
    var span = document.createElement("span");
    **span.style. + style = property;**

    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

我收到一条错误消息，有什么想法吗？

您可能想要

span.style += property;

相反

---

另一个考虑事项：您不想为变量使用名称

属性

，因为这是一个保留关键字（您可以看到，因为它以蓝色突出显示）和不好的东西™ 如果使用一个，则会发生这种情况。

方括号用于传递属性，例如：

function StyleChange(property, value){
  var span = document.createElement('span');
  span.style[property] = value;
  if(window.getSelection){
    var sel = window.getSelection();
    if(sel.rangeCount){
      var range = sel.getRangeAt(0).cloneRange();
      range.surroundContents(span);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
}

---

错误消息是什么？第二个代码块中的

**

是什么意思？