Change The Line Height Of The Selected Text With Javascript

I am trying to program my own WYSIWYG editor as a summer project. I am trying to implement the line height function that controls(single spacing, double spacing, etc). I have creat

Solution 1:

If I understand what you're trying to do, perhaps this will work for you:

functionchangeStyle( property, value ) {
    if ( window.getSelection().rangeCount ) {
        var range = window.getSelection().getRangeAt( 0 ),
            contents = range.extractContents(),
            span = document.createElement( 'span' );

        span.style[ property ] = value;
        span.appendChild( contents );
        range.insertNode( span );
        window.getSelection().removeAllRanges()
    }
}

#editor {
    width: 350px;
    max-height: 100px;
    padding: 20px;
    overflow-y: auto;
    background-color: #efefef;
    border: 1px solid #ddd
}

<p><labelfor="lineHeight">Line Height: </label><selectid="lineHeight"onchange="changeStyle('line-height', this.value)"><optionvalue="20px">20px</option><optionvalue="80px">80px</option><optionvalue="100px">100px</option><optionvalue="200px">200px</option></select><buttononclick="changeStyle('font-weight', 'bold')">Bold</button><buttononclick="changeStyle('font-style', 'italic')">Italic</button><buttononclick="changeStyle('color', 'red')">Color</button><buttononclick="changeStyle('background-color', 'yellow')">Background</button></p><divid="editor"contenteditable>Change the line height of the selected text with Javascript:<br>Please note that this example should be completed.</div>