Javascript Get the CSS-style of the letter, which is up to the carriage (cursor) in the contenteditable div

Question

I have content content div with content:

 <span style="font-weight: 700">S</span> <span style="font-weight: 100">o</span> <span style="color: red">m</span> <span style="text-decoration: underline">e</span> <span style="background-color: green">T</span> <span style="text-decoration: line-through">e</span> <span style="font-style: italic">x</span> <span style="font-family: Arial">t</span> 

And I want to get the style of the element, which is up to the carriage (cursor). For example, if I have a caret between Some and Text , I want to get text-decoration: underline . My code is below (it works, but I get the style of the last element ( font-family: Arial )). How can I fix this using javascript and / or jquery?
Thanks for the help.

 $('button').click(function() { var style = $('#Box span').last().attr('style'); $('#Result').text('Result: ' + style); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Box" contenteditable="true"> <span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span><span style="font-style: italic">x</span><span style="font-family: Arial">t</span> </div> <button>Get result</button> <p id="Result"></p> 

Answer 1

Ok I have found the answer.

 $('button').click(function() { document.execCommand('insertHTML', null, '<span id="test"></span>'); $('#Result').text($('#test').parent().attr('style')); $('#test').remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Box" contenteditable="true"> <span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span> <span style="font-style: italic">x</span><span style="font-family: Arial">t</span> </div> <button>Get result</button> <p id="Result"></p> 

Answer 2

See below code. This can display the style declared in the element next to the cursor.

 $('button').click(function() { var selection = null; if (window.getSelection) { selection = window.getSelection(); } else if (document.selection && document.selection.type != "Control") { selection = document.selection; } if(selection && selection.anchorNode && selection.anchorNode.parentNode) { var style = selection.anchorNode.parentNode.style.cssText; $('#Result').text('Result: ' + style); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="Box" contenteditable="true"><span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span><span style="font-style: italic">x</span><span style="font-family: Arial">t</span></div> <button>Get result</button> <p id="Result"></p> 

Answer 3

First, you need to save the last item under the mouse pointer. Then you can get any property or attribute by clicking with the mouse.

 let element; $(".container").on("mouseover", "span", function(e) { element = $(e.target); }); $(".container").on("mousedown", function(e) { $("#out").html(element.attr("style")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <span style="font-weight: 700">S</span> <span style="font-weight: 100">o</span> <span style="color: red">m</span> <span style="text-decoration: underline">e</span> <span style="background-color: green">T</span> <span style="text-decoration: line-through">e</span> <span style="font-style: italic">x</span> <span style="font-family: Arial">t</span> </div> <div id="out"></div> 

I'm not sure if this snippet is exactly the solution to your problem, but I hope this helps you get started.
Note , if you move the mouse from right to left, then when you click between two <span> , the style of the right element will be displayed. But we are talking about a few pixels.

Answer 4

You need to call like $ ("# Box span: nth-child (4)"). Attr ("style");

Answer 5

The content of an editable div is a sequence of span elements. Therefore, the position of the carriage n can be specified as the index of the span inside the div itself.

Therefore, my suggestion is based on getting the caret position in mouseup and storing this value as a data attribute for the editable div.

 // // get the caret pos // $('#Box span, #Box').on('mouseup', function(e) { var pos = 0; if (this.tagName.toLowerCase() == 'div') { pos = $('#Box span:last').index(); } else { e.stopPropagation(); pos = $(this).index(); } $('#Box').data('caretPos', pos); }); $('button').on('click', function(e) { var caretPos = $('#Box').data('caretPos'); var style = $('#Box span').eq(caretPos).attr('style'); $('#Result').text('Result: ' + style); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Box" contenteditable="true"> <span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span><span style="font-style: italic">x</span><span style="font-family: Arial">t</span> </div> <button>Get result</button> <p id="Result"></p>