Breaking News: Grepper is joining You.com. Read the official announcement!

change style selected text js

Ben Meziani answered on April 6, 2022 Popularity 3/10 Helpfulness 4/10

answer change style selected text js

related change style selected text js

change style selected text js

Comment

function changeFont(font) {
  var sel = window.getSelection(); // Gets selection
  if (sel.rangeCount) {
    // Creates a new element, and insert the selected text with the chosen font inside
    var e = document.createElement('span');
    e.style = 'font-family:' + font.value + ';'; 
    e.innerHTML = sel.toString();

    // https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
    var range = sel.getRangeAt(0);
    range.deleteContents(); // Deletes selected text…
    range.insertNode(e); // … and inserts the new element at its place
  }
}

Popularity 3/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript selected text

Link to this answer
Share Copy Link

Contributed on Apr 06 2022

Ben Meziani

0 Answers Avg Quality 2/10

Closely Related Answers

change style selected text js

Comment

Highlight text and change font <br>
<select id="select_font" onchange="changeFont(this);">
            <option value="Arial">Arial</option>
            <option value="Sans Serif" selected>Sans Serif</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Verdana">Verdana</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Impact">Impact</option>
            <option value="Bookman">Bookman</option>
            <option value="Garamond">Garamond</option>
            <option value="Palatino">Palatino</option>
            <option value="Georgia">Georgia</option>
        </select>
<div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc">
  Some Content
</div>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: selected javascript text

Link to this answer
Share Copy Link

Contributed on Apr 06 2022

Ben Meziani

0 Answers Avg Quality 2/10

change style selected text js

Comment

function changeFont(font) {
  document.getElementById("note_header").style.fontFamily = font.value;
}

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: selected javascript text

Link to this answer
Share Copy Link

Contributed on Apr 06 2022

Ben Meziani

0 Answers Avg Quality 2/10

change style selected text js

Contents

More Related Answers

change style selected text js

Closely Related Answers

change style selected text js

change style selected text js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.