HTML JS文本編輯器

Question

我試圖創建一個非常簡單的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（'color'，red）或StyleChange（'background'，'yellow'）。

就像是

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

Answer 2

你可能想要

span.style += property;

代替。

另一個注意事項：您不想為變量使用name property ，因為這是一個保留關鍵字（您可以看到，因為它以藍色突出顯示），如果您使用變量，則會發生Bad Things™。