Question

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

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

有人可以帮我这个吗？非常感谢。

Answer 1

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

1）通过span将css样式表中的样式应用于textnode：

//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 span。

2）通过//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); }直接（内联）将样式应用于textnode：

appendStyle

在任何一种情况下，都可以删除{{1}}功能。

动态地将CSS样式添加到textnode中

1 个答案: