HTML JS文本编辑器

Question

i am trying to create a very simple html text editor. i have utilised the context menu function to have different format options once a user selects on the highlighted text on screen will have a span tag appended to it.

this is what i have.

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

this works fine for changing the colour of the highlighted text. what i would like to do is be able to use this function to change any format of style for the text by passing an extra parameter when the function is called. so when it is called it will say something like. StyleChange('color',red) or StyleChange('background','yellow').

something like

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

i get an error message with this any ideas?

Answer 1

Square brackets are used to pass properties, like:

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

You probably want

span.style += property;

instead.

Another consideration: you don't want to use the name property for your variable, since that's a reserved keyword (as you can see since it's highlighted in blue) and Bad Things™ will happen if you use one.