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

html-css024

关于DOM节点CSS属性的设置问题,第1张

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

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

将

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

修改为以下格式,

方法一>

var element = headerrow.insertCell(0)

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

element.style.cssText = "color:#FF0000font-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:#FF0000font-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

如果某个div设置了高度，你可以获取这个div的高度，然后可以把这个高度给任意一个div赋值。

var height_num=document.getElementById("divID").height

var object_div=document.getElementById("childDiv")

object_div.height=height_num

宽度根据父级来定的：百分比——100% -->width：100%；（此时宽度填满为父级的宽度）。要注意，如果不是填满你希望的宽度，那就是父级的宽度需要你调整了；

display：block；块元素自动占满一行宽