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

html-css016

关于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的样式，通过修改元素的style属性值去修改CSS样式。

下面是个小例子：

<body>

<div></div>

</body>

<script>

var oDiv = document.getElementsByTagName('div')[0]

oDiv.style.width = '100px'  // 增加宽度

oDiv.style.height = '100px' // 增加高度

</script>

本文实例讲述了javascript实现动态导入js与css等静态资源文件的方法。分享给大家供大家参考。具体实现方法如下：

/**

*

动态导入静态资源文件js/css

*/

var

$import

=

function(){

return

function(rId,

res,

callback){

if(res

&&

'string'

==

typeof

res){

if(rId){

if($($('#'

+

rId),

$('head')).length>0){

return

}

}

//加载资源文件

var

sType

=

res.substring(res.lastIndexOf('.')

+

1)

//

支持js/css

if(sType

&&

('js'

==

sType

||

'css'

==

sType)){

var

isScript

=

(sType

==

'js')

var

tag

=

isScript

?

'script'

:

'link'

var

head

=

document.getElementsByTagName('head')[0]

//

创建节点

var

linkScript

=

document.createElement(tag)

linkScript.type

=

isScript

?

'text/javascript'

:

'text/css'

linkScript.charset

=

'UTF-8'

if(!isScript){

linkScript.rel

=

'stylesheet'

}

isScript

?

linkScript.src

=

res

:

linkScript.href

=

res

if(callback

&&

'function'

==

typeof

callback){

if

(linkScript.addEventListener){

linkScript.addEventListener('load',

function(){

callback.call()

},

false)

}

else

if

(linkScript.attachEvent)

{

linkScript.attachEvent('onreadystatechange',

function(){

var

target

=

window.event.srcElement

if

(target.readyState

==

'complete')

{

callback.call()

}

})

}

}

head.appendChild(linkScript)

}

}

}

}()

希望本文所述对大家的javascript程序设计有所帮助。