0

現在、古いテンプレートに新しい要素を挿入しようとしていますが、いくつかの問題があります。基本的に、すでに定義されている css ルールが他の場所にたくさんあるため、div を希望どおりに正確に配置することが非常に難しくなっています。

テキストが実際にレンダリングされる場所を表す div を何らかの方法で参照することは可能ですか? 解決策が JavaScript であるか CSS であるかは実際にはあまり気にしませんが、論理的には CSS がこの機能の適切な場所のように思えます。

例：

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

その例では、ページの幅にまたがる大きな div がありますが、実際には、テキストが実際に存在する比較的小さな領域を直接処理するものだけが必要です。これは可能ですか？

具体的には、既存のテンプレート (ナビゲーション タブを考えてください) に追加する新しいタイプの要素が非常にモジュール化されるようにすることです。これらのタブに非常に異なる説明の長さを使用し、DOM の親を事前に知らなくても背景を適用できるようにしたいと考えています (タブ内に新しいものを何でも配置できますが、現在のレイアウトではこれが機能する必要があることを意味します)ランダムなdiv内およびランダムなスパン内）

4

2 に答える 2

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で囲み、テンプレートに渡されたときにエスケープされないようにしました。

于 2013-07-25T16:10:15.360 に答える
0

要素自体に対してのみ、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>
于 2013-07-25T15:03:30.607 に答える