0

「.」(ドット) の後のすべての文字を取得し、JavaScript でスタイルを設定しようとしています。

例: $10.12 . スタイリングを数字「12」に設定したい。

この番号は、スパン内の phtml ファイルで動的に作成されます。

私はこのようなことを試みましたが、成功しませんでした:

var aa = document.getElementById('testdiv').innerHTML; // gets my span
var bb = aa.toString().split(".")[1]; // gets all numbers after "."
bb.setAttribute("style","width: 500px;");

みんなありがとう！あなたは本当に私を助けました。すべての回答に投票しますが、残念ながらまだ投票できません。

4

6 に答える 6

0

あなたはこのようなことをすることができます：

document.getElementById('testdiv').innerHTML = document.getElementById('testdiv').innerHTML.replace( /(\d+).(\d+)/, '$1.<span id="end">$2</span>' );
document.getElementById('end').style.fontWeight  = 'bold';

jsFiddleの例

bb.setAttributeノードではなく文字列に属性を設定しようとしているため、例は失敗します。10.12基本的に、変更するテキストを囲む要素を使用してを再構築する必要があり<span>ます。その後、他のJavaScriptメソッドを使用してスタイルを変更できます。使用していたメソッドはほぼ正しいものでしたが、split()メソッドがノードではなく文字列を返すため、最後の部分が機能しない点が異なります。

于 2013-02-26T14:56:25.553 に答える
0

試す

var elem = document.getElementById('testdiv');
elem.innerHTML = elem.innerHTML.replace( /(\d+)\.(\d+)/g, '$1.<span class="decimalPart">$2</span>' );
// (\d+)    one or more digits
// \.       a dot character. Must be escaped otherwise it means ANY character
// (\d+)    one or more digits
// g        regex flag to replace all instances, not just one.

次に、css でdecimalPartクラスのスタイリングを追加します

.decimalPart {
    width: 500px;
}

これには、HTML からスタイルを分離できるという追加の利点があります。

アップデート

コメントに従って、数字の使用直前の文字を取得します

 elem.innerHTML.replace( /(\s)([^\s\d]*?)(\d+)\.(\d+)/g, '$1<span class="currencySymbol">$2</span>$3.<span class="decimalPart">$4</span>' );
// (\s)       space, tab, carriage return, new line, vertical tab, form feed
// ([\s\d]*?) any set of characters that are not a digit or the above zero or more times
// (\d+)      one or more digits
// \.         a dot character. Must be escaped otherwise it means ANY character
// (\d+)      one or more digits
// g          regex flag to replace all instances, not just one.

複数の文字を使用する通貨記号を考慮していることに注意してください。

于 2013-02-26T15:05:16.467 に答える
0

正規表現でこれを行うことができます：

onlyDigitsText = text.replace(/\.([0-9]*)/g, ".<span class='highlighted'>$1</span>");

JsFiddle の例

于 2013-02-26T15:02:51.890 に答える
0

あなたの間違いはここから始まります：

var aa = document.getElementById('testdiv').innerHTML; // gets my span

それはスパンではなく、その HTML コンテンツです。幅を設定するには、代わりに次のようなものが必要です。

var aa = document.getElementById('testdiv'); // gets my span
aa.style.width = "500px";
于 2013-02-26T14:51:50.937 に答える
0

テキスト ノードではなく、HTML 要素にのみスタイルを適用できます。

代わりにこれを試してください：

var elem = document.getElementById('testdiv');
var parts = elem.innerHTML.toString().split(".");
parts[1] = "<div style=\"width: 500px\">" + parts[1] + "</div>";
elem.innerHTML = parts.join(".");

スタイルが適用されていることがすぐにわかるので使用しましたが、新しい行に「12」がない「$10.12」のように数値を一貫して表示したい場合は、おそらく追加のスタイルを適用するか、再考する必要があります。 HTMLをどのように出力しているか。

于 2013-02-26T14:50:08.650 に答える
0

スタイルを textNode に設定することはできません。回避策は、「.」の後の文字をラップする要素を作成することです。スパンを使用して。考え方は単純です。最初に「。」で分割します。「。」があるかどうかを確認します。そうであれば、要素を作成してラップし、スタイルを設定します。最後に「.」でつなぎ直します。

var inner = document.getElementById('testdiv').innerHTML;
var arr = inner.toString().split(".");

if(arr.length > 1)
{
   arr[1] = '<span style="display: inline-block; width: 500px;">' + arr[1] + '</span>';
}
newContent = arr.join(".");
document.getElementById('testdiv').innerHTML = newContent;
于 2013-02-26T14:58:22.097 に答える