关于DOM节点CSS属性的设置问题

createTextNode 会输出全部文本, 可以在它的容器上添加样式.

即 headerrow.insertCell(0) 时添加样式

将

headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));

修改为以下格式,

方法一>

var element = headerrow.insertCell(0)

element.appendChild(document.createTextNode("姓名"));

element.style.cssText = "color:#FF0000;font-size:24px;"

或者将样式写进 css 文件,设置元素的 className:

方法二>

var element = headerrow.insertCell(0)

element.appendChild(document.createTextNode("姓名"));

element.className = class;

或者用 "太极八卦饼" 的方法:

方法三>

var element = headerrow.insertCell(0)

element.appendChild(document.createTextNode("姓名"));

element.style.fontSize= "30px";

element.style.color = "#FF0000";

.....

方法二通用性好一些, 只需要写一份CSS, 可以供后面的代码重用, 而且代码进行了分离.

其它的两个处理方法类似

方法一也可以样式文本存入变量, 在当前 js 中实现重用.

var cssText = "color:#FF0000;font-size:24px;"

var element = headerrow.insertCell(0);

element.appendChild(document.createTextNode("姓名"));

element.style.cssText = cssText;

element = headerrow.insertCell(1);

element.appendChild(document.createTextNode("年龄"));

element.style.cssText = cssText;

element = headerrow.insertCell(2);

element.appendChild(document.createTextNode("性别"));

element.style.cssText = cssText;