Question

我有满意的S o m e T e x t内容：

Some

并且想要得到插入符号（光标）之前的元素的样式。例如，如果我在Text和text-decoration: underline之间得到插入符号，我想获得font-family: Arial。我的代码在下面（工作，但我得到了最后一个元素的样式（$('button').click(function() { var style = $('#Box span').last().attr('style'); $('#Result').text('Result: ' + style); });））。如何使用JavaScript或/和JQuery修复它？感谢帮助。

<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>

<img src="/path/to/your-image.png" style="height:100%; width:auto;" >

Answer 1

确定。我找到了答案。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

请参阅以下代码。这可以输出在光标旁边的元素上声明的样式。

＆＃13;

$('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);
  }
});

＆＃13;

<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>

＆＃13;

Answer 3

首先，你需要保留鼠标指针下的最后一个元素。然后，当单击鼠标时，您可以获得它的任何属性或属性。

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>

我不确定，这个代码片段能解决您的问题，但我希望，它可以帮助您开始使用。
注意，如果您从右向左移动鼠标，则当您在两个之间点击时，将显示正确的元素的样式。但这是几个像素的问题。

Answer 4

你必须打电话 $（＆＃34; #Box span：nth-child（4）＆＃34;）。attr（＆＃34; style＆＃34;）;

Answer 5

您的内容可编辑div是一系列span元素。因此，插入符号positionn可以像div本身内部的跨度索引一样被假设。

因此，我的建议是基于在 mouseup 上获取插入符位置并将此值保存为内容可编辑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>

JavaScript - 在contenteditable div中获取插入符号（光标）之前的CSS样式字母

5 个答案: