2

自動生成されたテキストノードに CSS スタイルを追加する際に問題があります。textnode に親ノードがないことはわかっています。そのため、css スタイルを追加することはできません。

基本的に、私がする必要があるのは、ユーザーがページで作成した「+」ボタンをクリックすると、新しいテキストノードが . ユーザーがもう一度クリックすると、別の新しいテキストノードが継続的に追加されます。ただし、textnode を作成した後に css スタイルを追加したいと考えています。

これが私のコードです：

function addRowToTable() {

//find the last row in the table and add the new textnode when user clicks on the button
var tbl = document.getElementById('audioTable2');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

//after find the last row in the table, and it will add the new cell with the new textnode
    var cellLeft = row.insertCell(0);
    var el_span = document.createElement('span');
    var el_spanClass = el_span.setAttribute('class', 'test');
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);
}

//this is the css style I would like to apply into the new gerenated textnode
function appendStyle(styles){
     var css = document.createElement('style');
 css.type='text/css';

 if (css.styleSheet) css.styleSheet.cssText = styles;
 else css.appendChild(document.createTextNode(styles));
 document.getElementsByTagName("head")[0].appendChild(css);
}

誰かがこれについて私を助けることができますか? どうもありがとう。

4

1 に答える 1

4

「自動生成されたテキストノードに css スタイルを追加する際に問題があります」とあなたは言いますが、あなたが提供するコードは、すべての新しいテキストノードにstyle要素を追加しようとしていることを示しています。headあなたが望むのは、1）スタイルシートですでに定義されているスタイルをテキストノードに適用するか、2）テキストノードをインラインで直接スタイル設定することだと思います。したがって、コードは次のいずれかである必要があると思います。

1) css スタイルシートのスタイルを、以下を介してテキストノードに適用しますspan。

//after find the last row in the table, and it will add the new cell with the new textnode
    var cellLeft = row.insertCell(0);
    var el_span = document.createElement('span');
    var el_spanClass = el_span.setAttribute('class', 'test');
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(el_span);
    el_span.appendChild(textNode);
}

これにより、spanがセルに挿入され（コードでは実行されません）、テキストノードがスパンでラップされ、 が になりclassますtest。

2) を介してテキストノードにスタイルを直接 (インラインで) 適用しますspan。

//after find the last row in the table, and it will add the new cell with the new textnode
    var cellLeft = row.insertCell(0);
    var el_span = document.createElement('span');
    el_span.setAttribute('style', 'color: red'); /*just an example, your styles set here*/
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(el_span);
    el_span.appendChild(textNode);
}

どちらの場合も、appendStyle関数が削除される可能性があります。

于 2012-01-05T17:48:30.377 に答える