Динамически добавлять стиль CSS в textnode - PullRequest
Новая
       13

Динамически добавлять стиль CSS в textnode

1 голос
/ 05 января 2012

У меня проблема с добавлением стиля CSS в автоматически сгенерированный текстовый узел.Я знаю, что у textnode нет родительского узла.Так что я не могу просто добавить в него стиль 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);
}

Может ли кто-нибудь помочь мне в этом?Большое спасибо.

1 Ответ

3 голосов
/ 05 января 2012

Вы говорите: «У меня проблема с добавлением стиля 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 в ячейку (что вы не делаете в своем коде), что затем оборачивает текстовый узел в 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 может быть удалена.

...