如何动态加载外部CSS与JS文件

html-css09

如何动态加载外部CSS与JS文件,第1张

动态加载外部css样式及css样式,参考代码如下:

// 动态加载外部js文件 

var flag = true 

if( flag ){ 

loadScript( "js/index.js" ) 

function loadScript( url ){ 

var script = document.createElement( "script" ) 

script.type = "type/javascipt" 

script.src = url 

document.getElementsByTagName( "head" )[0].appendChild( script ) 

// 动态加载js 

if( flag ){ 

var script = document.createElement( "script" ) 

script.type = "text/javascript" 

script.text = " " 

document.getElementsByTagName( "head" )[0].appendChild( script ) 

// 动态加载外部css样式 

if( flag ){ 

loadCss( "css/base.css" ) 

function loadCss( url ){ 

var link = document.createElement( "link" ) 

link.type = "text/css" 

link.rel = "stylesheet" 

link.href = url 

document.getElementsByTagName( "head" )[0].appendChild( link ) 

// 动态加载css样式 

if( flag ){ 

var style = document.createElement( "style" ) 

style.type = "text/css" 

document.getElementsByTagName( "head" )[0].appendChild( style ) 

var sheet = document.styleSheets[0] 

insertRules( sheet,"#gaga1","background:#f00",0 ) 

function insertRules( sheet,selectorTxt,cssTxt,position ){ 

if( sheet.insertRule ){ // 判断非IE浏览器 

sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position ) 

}else if( sheet.addRule ){ //判断是否是IE浏览器 

sheet.addRule( selectorTxt ,cssTxt ,position ) 

}

都行 因为id一般是独一无二的 所以可以直接写,如#1{};

但是class名字有时候就会重复,如果单单只写一个.div{}的话 就很有可能样式混淆出错 那么通过子选择器如:#1 .div{}这样写就不会导致样式错乱了

Html中引入css的主要方式有四种,分别是外部样式、内部样式、内联样式、导入式。

一、外部样式

(一) 使用外部样式的好处

1.减少代码量 ,网站中相同部分的样式只需要编写一次,我们只需要把css文件引入到不同的html页面中即可实现展示效果。

2.更改网站风格方便,我们可以通过修改一个css文件就可以实现整个网站的外观修改。

3.Html页面渲染时,css文件能够被同时加载。

4.结构与表现分离,便于后期维护。

(二) 适用于多个页面需要相同样式内容的时候使用

(三) 书写位置:新建单独的后缀名为.css文件,使用link标签引入到html页面中,将link标签放到Html页面的head标签中

例:

rel:规定当前文档与被连接文档之间的关系.

href:规定为连接文档的位置

type:规定被连接文档的MIME类型

二、内部样式

(一) 使用内部样式的好处

1.结构与表现分离,便于后期维护。

2.所有的CSS控制都是针对单独的面,没有多余的CSS代码。

3.同样页面中相同的样式可以重复使用。

(二) 使用内部样式的缺点

1.只能在一个页面中使用

2.网站更换风格麻烦

3.Css在html页面中,页面显得臃肿

(三) 适用于个别页面需要特殊样式时

(四) 书写位置:写在html页面的head标签之间,在head标签之间书写style标签

例:

三、行间样式

(一) 使用内部样式的好处

1. 单独修改单个标签的样式

(二) 使用内部样式的缺点

1. 结构与表现没有分类,不利于后期维护。

2. 只能修改单个标签的样式,代码重复利用率不高,代码冗长。

(三) 适用于个别标签需要特殊样式时

(四) 书写位置:在标签的开始标签内部书写style=””

例:

四. 导入式

(一) 使用导入的好处

1.减少代码量,网站中相同的部分的样式只需要书写一次,后续只需要把css文件引入到不同的Html页面中即可。

2.更改网站风格方便,我们可以通过修改一个css文件,就可以修个整个网站的外观。

3.结构与表现分离,便于后期维护。

(二) 使用导入的缺点

1.需要等Html页面全部加载完才能加载css文件。

(三) 适用于多个页面需要展示相同样式的时候

(四) 书写位置:写在Html页面的head标签中的style表现中,用@import导入css文件