Question

现在我正在努力在旧模板中插入一个新元素，我遇到了一些问题。基本上在其他地方有一堆已经定义的css规则，这使得我很难按照自己的意愿准确定位我的div。

是否有可能以某种方式引用一个div来表示文本实际呈现的位置？如果解决方案是在javascript或css中，我实际上并不在意，但逻辑上css似乎是这个功能的正确位置。

示例：

<div>
    <div style="text-align:right">Content</div>
</div>

在那个例子中，会有一个跨越页面宽度的大div，但我真的只想要一些直接处理文本实际存在的相对较小区域的东西。这可能吗？

具体来说，我要做的是确保我添加到现有模板（想想导航标签）的新类型元素将是非常模块化的。我希望能够为这些选项卡使用非常不同的描述长度，并且能够在不事先了解其DOM父项的情况下将背景应用于它们（我可以在其中添加任何新内容，但当前布局意味着这将需要工作在一些随机div内，也在一些随机范围内）

Answer 1

我对此感到非常愚蠢，但是我会继续发布这个答案，以防其他人在将来搜索这个问题。实际上，jQuery对此有一个简单的解决方案。

示例：

<div>
    <div id="id" style="text-align-right">Some Text</div>
</div>

$(document).ready(function(){
    $("#id").wrapInner("<span id=renderedTextWrapper" />);
    $("#renderedTextWrapper").//do whatever you want with it
}

一旦你拥有了这个元素，你可以很容易地做任何你喜欢的事情。为了解决必须将其插入到随机DOM位置的问题，我只是将我的文本包装在div中，并确保它在传递给模板时没有被转义。

Answer 2

你不能在html元素中对文本进行定位，只能对元素本身进行定位。

然而，你可以（如果你想走这么远）计算元素的大小，找到它的位置和它的文本对齐，并做数学计算以确定新插入元素的放置位置。理论上，您可以计算元素中的字符，获取字体大小并以像素计算它们的长度。我无法证明计算，因为您尚未提供业务规则

<div>
    <div style="text-align:right">Content</div>
</div>

<script>
function insertNewElement(element, newElement){ //element is a jquery object referencing the element you're inserting against and newElement is the one you're inserting

    var offset = element.offset()
    var alignmnet = element.css("text-align")
    var parent = element.parent(); 
    //now do the calculations you need to and adjust the newElement's css
    parent.append(newElement); 

}

</script>

用css引用文本位置

2 个答案: