JavaScript动态更改引入样式表

快乐打工仔 分类:实例代码

JavaScript动态更改引入样式表属于前端实例代码,有关更多实例代码大家可以查看

本章节如何动态设置页面的css样式属性,比如页面的换肤效果也是通过此方式实现的。

当然比较完善的换肤效果要稍稍复杂一些,这只是介绍一下如何更改外部css样式表。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<link href="css/blue.css" rel="stylesheet" id="mylink"/>
<script type="text/javascript"> 
function gel(id){ 
  return document.getElementById(id); 
} 
window.onload=function(){ 
  var lis=gel("uList").childNodes; 
  for (var i = 0; i < lis.length; i++){ 
    if(lis[i].nodeType==1){ 
      lis.onclick = function () { 
        gel("mylink").href = "css/" + this.className + ".css"; 
      }; 
    } 
  } 
}; 
</script>
</head>
<body>
<div> <span>犀牛前端部落欢迎您</span><br/>
  <input type="text" id="txt"/>
  <input type="button" value="提交" class="btn"/>
</div>
<ul id="uList">
  <li style="width:30px;height:20px;background-color:red;" class="red"></li>
  <li style="width:30px;height:20px;background-color:blue" class="blue"></li>
</ul>
</body>
</html>

以上代码点击li元素可以切换不同的样式表效果,下面介绍一下它的实现过程。

一.代码注释:

(1).function gel(id){return document.getElementById(id);},封装了一下document.getElementById()函数,使用更方便。

(2).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(3).var lis=gel("uList").childNodes,获取ul元素下的所有子节点,包括文本节点和元素节点,空白和换行属于文本节点。

(4).for (var i = 0; i < lis.length; i++),遍历每一个节点。

(5).if(lis.nodeType==1),判断节点是否是元素节点。

(6).lis.onclick = function () {gel("mylink").href = "css/" + this.className + ".css";},注册click事件处理函数,也就是点击li元素就会重新设置link标签的href属性值。

二.相关阅读:

(1).nodeType属性参阅js nodeType属性一章节。

(2).childNodes属性参阅js childNodes一章节。 

(3).className参阅js className一章节。

JavaScript动态更改引入样式表,这样的场景在实际项目中还是用的比较多的,关于JavaScript动态更改引入样式表就介绍到这了。

回复

我来回复
  • 暂无回复内容