javascript实现动态导入js与css等静态资源文件的方法

html-css018

javascript实现动态导入js与css等静态资源文件的方法,第1张

本文实例讲述了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程序设计有所帮助。

手机和PC端用同一个模板吗?自定义CSS这样好些,不要直接用DW设。DW设计出来的代码是非常不专业的。首先页头CSS链接:你不要用中文名文件夹,“微软雅_”改成英文文件夹。stylesheet.css就是你的CSS文件。页头部分的<style stype="text/css">……</script>这段属于CSS样式代码,你可以把这部分放进CSS文件里。记得去掉<style stype="text/css">和</script>,这是在WEB页才要的标示,在CSS文件里是不需要的。你说的正文样式设置,你现在的代码只标示了<p>的样式。你可以在正文前面的DIV里面加样式:页面代码这样改:<div class="suojin"><p>什么是传承……</p></div>一般网页输入的编辑器会自动产生<p>作为换行。看你的情况似乎只是在DW里加入文字,没使用编辑器。你看着来吧!然后在CSS文件中加入CSS样式:.suojin {样式内容}.suojin p {样式内容}CSS其实很简单,你想要什么样式,不懂的话直接百度css行高样式什么的很容易找。比如宽度width:200px高度height:32pxmaring和pidding距离等等。你代码中的行距line-height:200%这样不好,直接用px固定行距。比如,你在CSS文件中这样写:.shuojin {}.shuojin p {line-height:32pxfont-size:26pxmargin-top:10px}这样应该能得到你想要的效果了。maring-top,就是<p>和上面的距离,在这里可以当做段距使用,在这里用padding-top效果一样,你试试就知道了。其实CSS不难学,困难的是一般复杂的效果和浏览器兼容方面的问题,如果你学会基础也会百度自学了。诚意满满,记得选我哈!