网页换肤效果的实现原理
2020-12-13 02:57
标签：style blog class code java tar 效果原理： 准备几套CSS样式表 调式好每个CSS样式表的兼容性 在点击按钮时，改变link中href的值（js获取link标签，通过js改变href的值，link也可以给其id） HTML和js： 网页换肤效果的实现原理,搜素材,soscw.com 网页换肤效果的实现原理 标签：style blog class code java tar 原文地址：http://www.cnblogs.com/LO-ME/p/3721774.html
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=utf-8" />
title>无标题文档title>
link id="link1" href="css1.css" rel="stylesheet" type="text/css" />
head>
body>
dl id="message">
form>
dt>
strong>可以换肤的提交框：strong>
input id="btn1" type="button" value="皮肤1" />
input id="btn2" type="button" value="皮肤2" />
dt>
dd>输入姓名：input class="text" type="text" />dd>
dd>输入密码：input class="text" type="password" />dd>
dd>请您留言：textarea>textarea>dd>
dd class="center">input class="btn" type="submit" value="提交" />dd>
form>
dl>
body>
script type="text/javascript">
if(document.getElementById){
btn1 = document.getElementById("btn1");
btn2 = document.getElementById("btn2");
link1 = document.getElementById("link1");
btn1.onclick=function(){
link1.href="css1.css";
}
btn2.onclick=function(){
link1.href="css2.css";
}
}else{
alert("浏览器不兼容，请更换");
}
script>
html>