<1>初探js特效魅力之div显示隐藏变色02
日期：2014-05-16 浏览次数：20441 次
初探js特效魅力02
在上一课中，我们获取div的id时，老是用到document.getElementById("div2").style.width="300px"这句话，其实我们可以声明一个变量接住它，在后面使用时，可以方便很多，如下：
function toGreen(){
var oDiv=document.getElementById("div2");
oDiv.style.width="300px";
oDiv.style.height="300px";
oDiv.style.background="green";
}
function toRed(){
var oDiv=document.getElementById("div2");
oDiv.style.width="100px";
oDiv.style.height="100px";
oDiv.style.background="red";
}
他们的最终效果是一样的，你可以把js魅力01更改一下，效果是一样。
接下来为大家介绍的网页换肤色的特效：
其实不管我们在标签上做什么，都应该获标签的id，
如下我有两个css肤色，如：
css1.css
body{
background:black;
}
input{
width:200px;
height:100px;
background:yellow;
}
css2.css
body{
background:#999;
}
input{
width:100px;
height:50px;
background:red;
}
网页内容是：
<!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>js特效</title>
<link id="link1" rel="stylesheet" type="text/css" href="css1.css" />
</head>
<script>
function fu1(){
var oDiv=document.getElementById("link1");
oDiv.href="css1.css";
}
function fu2(){
var oDiv=document.getElementById("link1");
oDiv.href="css2.css";
}
</script>
<body>
<input type="button" value="皮肤1" onclick="fu1()"/>
<input type="button" value="皮肤2" onclick="fu2()"/>
</body>
</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>js特效</title>
<!-- <link id="link1" rel="stylesheet" type="text/css" href="css1.css" />-->
</head>
<script>
function setText(){
var oDiv=document.getElementById("txt1");
oDiv.value="123456789";
}
</script>
<body>
<input typ
