您的位置：首页 > Web前端 > CSS

js点击调用不同的css文件

2017-11-28 17:22 211 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用js调用不同的css</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script>
var cssPath = "css/style";
（var cssPath = "00";调用的css文件名是在对应的点击数字后加00）
var styleID=0;document.write('<link rel="stylesheet" type="text\/css" id="cssLink" href="'+cssPath+styleID+'.css" \/>');
//调用css文件夹下的style名的css

var cssLink=document.getElementByIdx_x_x_x_x("cssLink");
function styleChange(n) {
cssLink.href = cssPath+n+".css";
//点击调用对应数字的css
}
</script>
</head>
<body>
<div id="title">
换个颜色换种心情：
<a href="javascript:styleChange(1);" class="red">点我变红色</a>
<a href="javascript:styleChange(2);" class="yellow">点我变黄色</a>
<a href="javascript:styleChange(3);" class="blue">点我变蓝色</a>
<a href="javascript:styleChange(4);" class="green">点我变绿色</a>
</div>
<div id="warptest">
用js调用不同的css测试文字测试文字</div>
</body>
</html>

然后在新建5个不同的css文件

文件1 style.css

* { font-size:12px}
a.red { color:#FF3333; text-decoration:underline}
a.red:hover { color:#FF9999; text-decoration:none}
a.yellow { color:#EBD852; text-decoration:underline}
a.yellow:hover { color:#EAE366; text-decoration:none}
a.blue { color:#0066CC; text-decoration:underline}
a.blue:hover { color:#00CCFF; text-decoration:none}
a.green { color:#009933; text-decoration:underline}
a.green:hover { color:#33FFCC; text-decoration:none}
#title { width:500px; height:30px; line-height:30px}
#warptest { width:480px; height:100px; background:#f7f7f7; border:1px solid #d3d3d3; padding:10px; color:#666}

文件2 style1.css

#warptest { width:480px; height:100px; background:#fdf8f8; border:1px solid #ef8a8a; padding:10px; color:#7a0d0d}

文件3 style2.css

#warptest { width:480px; height:100px; background:#fffff7; border:1px solid #ffcc00; padding:10px; color:#b28f06}

文件4 style3.css

#warptest { width:480px; height:100px; background:#e8f5fe; border:1px solid #a9c9e2; padding:10px; color:#1b3d58}

文件5 style4.css

#warptest { width:480px; height:100px; background:#f8ffe7; border:1px solid #abdc8d; padding:10px; color:#33581d}

转载：http://blog.sina.com.cn/s/blog_a0cf3b5e010187sh.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航