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

html-css014

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程序设计有所帮助。

JS可以使用css属性来进行样式修改,并且不仅可以修改单一属性,也可以同时修改多个属性。

案例

以下小案例使用JQuery作为演示。

前提: html页面首先必须引入JQuery,放置在body体最后的位置。例如:

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

html部分代码

<p>

    我是一个段落,我没有背景颜色的,但是JQuery会给我增加背景颜色。

</p>

<button>

点击我,给上面段落添加黄色背景颜色。

</button>

JQuery代码

 $("button").click(function(){

        $("p").css("background-color", "yellow")

 })

修改多个属性

$("button").click(function(){

        $("p").css({"background-color": "yellow", "font-size": "200%"})

 }) 结论与解释:

首先使用Jquery选择器进行元素选择 - $("button")

为该元素绑定点击事件 - click

click中的匿名函数修改css属性。

在css属性的修改中,p段落有了黄色背景; 多个属性修改,不但有了黄色背景而且字体是之前的两倍大小。

注意事项:

可以不用非要绑定事件,在本案例中,绑定事件是为了更好地演示Jquery如何操作css属性。

修改单一属性和多个属性的写法是有区别的,多个属性使用{},属性与值之间用:分割,属性与属性之间用,分割。

思路:首先获取div对象,然后使用className属性获取类名,关键代码如下

1

document.getElementById("test").className

实例演示:

1、HTML结构

1

2

<div id = "test" class="test_class">我的类名为test_class</div>

<input type='button' value='获取div类名' onclick="fun()"/>

2、javascript代码

1

2

3

4

function fun(){

name = document.getElementById("test").className

alert(name)

}