Filed under: 开发编程 |
Posted on March 29th, 2006 by 李 方进
准备两个CSS分别控制不同的风格。
[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css</title>
<LINK title="C1" rel="stylesheet" href="C1.css" mce_href="C1.css" type="text/css" />
<link title="C2" rel="alternate stylesheet" href="C2.css" mce_href="C2.css" type="text/css" />
</head>
<body>
<span class="foo">文字</span>
<script type="text/javascript" language="javascript">
<!--
function SetActiveStyleSheet(title)
{
for (var i=0; i<document.getElementsByTagName("link").length; i++)
{
//循环所有名称为link的标签
var e = document.getElementsByTagName("link")[i];
if (e.getAttribute("rel").indexOf("style") != -1)
{
//这个link标签的rel属性含style，证明其作用是链接CSS文件的
if (e.getAttribute("title") == title)
{
//当前link对应的CSS就是要使用的CSS，将disabled属性设置为false表示启用
e.disabled = false;
}
else
{
e.disabled = true;
}
}
}
}
-->
</script>
<input type="button" value="C1" onclick="SetActiveStyleSheet(this.value);">
<input type="button" value="C2" onclick="SetActiveStyleSheet(this.value);">
</body>
</html>
Leave a Reply