javascript - HTML JS 文本编辑器

Question

我正在尝试创建一个非常简单的 html 文本编辑器。 我利用上下文菜单功能来获得不同的格式选项，一旦用户选择屏幕上突出显示的文本，就会在其上附加一个跨度标签。

这就是我所拥有的。

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);
        }
    }
}

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

Answer 1

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

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);
    }
  }
}