こんにちは、javascript で部分文字列のスタイルを設定しようとしています。これが私のコードです：
function runtest(){
document.getElementById("test1").innerHTML.substring(0,2).style.fontStyle="italic";
}
部分文字列関数は機能しますが、スタイルを追加すると、エラー コンソールに「未定義」のエラーが表示されます。この部分文字列をjavascriptでスタイルするにはどうすればよいですか?
2 つのオプション:
innerHTML解決策。警告: これにより、実行している要素内のすべての要素のイベント ハンドラーが削除されます。ここで主に言及するので、それを指摘できます。
var elm = document.getElementById("test1");
var html = elm.innerHTML;
elm.innerHTML = '<span style="font-style: italic">' + html.substring(0, 2) + '</span>' + html.substring(2);
を使用しsplitTextます。ここでは、スパンでラップするテキストが要素内の最初のテキスト ノードであると想定しています。これにより、要素のイベント ハンドラーが混乱することはありません。
var elm = document.getElementById("test1");
var node = elm.firstChild;
var span = document.createElement('span');
node.splitText(2);
span.style.fontStyle = "italic";
elm.insertBefore(span, node);
span.appendChild(node);
splitText指定したオフセットに分割点を配置して、以前は 1 つだった場所に隣接する 2 つのテキスト ノードを作成します。次に、最初のものを取得して、 でラップしspanます。