如何将css样式计算到一个可满足需求的元素中?

I have a contenteditable element with some nested spans to provide styling inside of it. I need to find out what the css classes are at any given offset of the elemebt. For example, I might have something like this:

我有一个contenteditable元素，它有一些嵌套的span，可以在其中提供样式。我需要知道什么是css类，在任何给定的元素的偏移。例如，我可能有这样的东西:

<div contenteditable>
     <span class"nothing">    </span>
     <span class="outer">my <span class="other">name</span> is </span><span class="name">Andrew</span>
</div>

And the text on the screen will look like this (with appropriate styling):

屏幕上的文字看起来是这样的(有适当的样式):

my name is Andrew

Now, imagine that the contenteditable area could be much bigger and have many nested span elements. At any given Given an offset into the text, I need to be able to calculate the css classes that contain it.

现在，假设contenteditable区域可能更大，并且有许多嵌套的span元素。在任何给定的给定偏移量的文本中，我需要能够计算包含它的css类。

For example, let's say I need that css styles at the offset 4, which is the n of name. I would expect the result to be:

例如，假设我需要在偏移量4的css样式，也就是n的名称。我希望结果是:

outer other

An equivalent solution is that is if given an offset, (say 4), I can calculate the html element that is wrapping that location (in this case, it would be:

一个等价的解决方案是，如果给定一个偏移量(比如4)，我可以计算出包围该位置的html元素(在本例中，它将是:

<span class="other">name</span>

I am using jquery, but no other libraries. How can I easily calculate this?

我使用的是jquery，但是没有其他的库。我怎么计算这个?

---

EDIT: I was using a textarea earlier, but that won't work. I should be using a contenteditable div element.

编辑:我之前使用的是textarea，但这行不通。我应该使用contenteditable div元素。

2 个解决方案

#1

I suggest inserting a temporary dummy span, grab it with Jquery, then ascend parents pushing the class list onto an array until you hit your outer container. Of course if you only want the currentStyle, that's even easier.

我建议插入一个临时的虚拟空间，用Jquery抓取它，然后提升父母将类列表推到一个数组上，直到您到达您的外部容器。当然，如果您只想要currentStyle，那就更简单了。

As to how to get your dummy span into the textarea, if you only have a character position, see Insert text into textarea at cursor position (Javascript). If you want to insert at the caret, see Insert text into textarea with jQuery.

至于如何将你的虚拟空间带进文本区域，如果你只有一个字符位置，请参见在光标位置(Javascript)的textarea中插入文本。如果您想插入插入符号，请参见用jQuery将文本插入文本区域。

#2

You can't do that with a textarea. Anything inside it will be considered text, not markup. You should look into "contenteditable" elements.

你不能用一个textarea来做。它里面的任何东西都是文本，而不是标记。您应该查看“contenteditable”元素。