动态添加css样式到textnode中

Question

我在将 css 样式添加到自动生成的文本节点中时遇到问题。我知道文本节点没有任何父节点。所以我不能只在其中附加 css 样式。

基本上，我需要做的是，当用户单击我在页面中创建的“+”按钮时，它将在其中一个 .当用户再次点击时，它会不断添加另一个新的文本节点。但是，我想在创建文本节点后添加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);
}

有人可以帮助我吗？多谢。

Answer 1

您说：“我在将 css 样式添加到自动生成的文本节点中时遇到问题”但是您提供的代码显示您正在尝试添加 <对于每个新文本节点，将 code>style 元素添加到 head 中。我认为您想要的是 1）将样式表中已定义的样式应用到文本节点，或者 2）直接内联文本节点的样式。因此，我认为您的代码应该是：

1）通过 span 将 css 样式表中的样式应用到文本节点：

//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 放入单元格中（您可以使用不要在你的代码中这样做），然后它会用 span 包装文本节点，给它一个 test 的 class 。

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 函数都可能被删除。