edit text size and color when highlight

Question

is it possible to change text color, size and font when highlighted im trying to see how i can do this without going through class and id will it be possible

all i need is the script i have the rest this is what i have for my script

 $("#fs").change(function() {
//alert($(this).val());
$('.item1').css("font-family", $(this).val());

 });

$("#size").change(function() {
$('.item1').css("font-size", $(this).val() + "px");
});


 $('.foo').click(function(){
$('.item2').css("color", $(this).attr('data-color'));
 });

look at here: http://stackoverflow.com/questions/3731328/on-text-highlight-event — Mojtaba, May 18 '16 at 19:12
im sorry but that is not what im looking for i want to change color font and size when i highlight — fidel, May 18 '16 at 19:16

score 0 · Answer 1 · answered May 18 '16 at 19:55

Unfortunately, there is no out of the box solution for such functionality. But you can still use document.getSelection() along with key events(such as mouseup) to achieve close to what you are looking for.

<label>Highlight any text from this sentence</label>
<br>
<label>Highlight any text from this sentence</label>

$(document).on('mouseup',function(e) // delegate a mouseup event on the document
{   
  // locate the target element using e.target
  $(e.target).html($(e.target).html().replace(document.getSelection(), '<span class=\"highlighted\">' + document.getSelection() + '</span>')); // replace the html by replacing the selected text via document.getSelection() with a html enclosed text.
});

Example : https://jsfiddle.net/DinoMyte/ez8cgsx7/6/

edit text size and color when highlight

1 Answers1