問題タブ [text-styling]

入力のあるフォームがあります。ユーザーがフォームを送信すると、入力値を入力に変更したいのですが、その一部をマークアップします。入力値の一部を微分したい。区別したいもののcharAt値は配列に格納されています。文字にはスタイル プロパティがないため、このコードは機能しません。私はそれを回避する必要があります。

私は Confluence で作業CSSしUI boxesてdivsおり!important、child divs. 他のマクロ (divsデフォルトのスタイリング) はこれらの内部にネストできるためUI boxes、!important意図せずにスタイルが引き継がれます。

より具体的に言えば、 に黄色background-colorがありdiv.rwui_type_noteます。divユーザーが 内にパネル マクロを作成すると、内部は別のものになりNote UI boxます。親div(UI Note) のスタイリングはbackground、子div(パネル) のテキストを黄色にしています。

div.panel-contentConfluence で定義されている既定のスタイル、またはページ エディターを使用するときにマクロでユーザーが手動で定義したスタイルを維持する必要があります。

Note UI Box のカスタム CSS は次のとおりです。

HTML以下は、ノート UI ボックス内に白い背景パネルが作成されたときに、Confluence がどのように を作成するかを示しています。

スクリーン ショット - パネル付き UI ボックス

js と jQuery で単純な html をスタイリングするのにあらゆる種類の問題があります。ここでは説明するために jsfiddle が使用されているようです。私はそれが初めてで、コンソール出力や目的の結果が表示されないため、この質問をして、どのように役立つかについて詳しく学びます。.cssが機能しないこととバリエーションを検索しました

JavaScript

document.getElementsByTagName('pre').text.css("色: 青;"); jquery: const preSentences = $("pre").text().split(".") console.log({preSentences})

// preSentences.forEach(function(str) { $(this).css("color: blue; border: 1px solid black")}); // $.each(preSentences, function(str) { $(this).blue }) // preSentences[1].style("color: blue; border: 1px solid black");

フィドルはここにあると思います-埋め込みリンクを試しましたが、表示されません: https://jsfiddle.net/Lz8nh50o/