初探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" οnclick="fu1()"/>
<input type="button" value="皮肤2" οnclick="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 type="text" value="aaaa" id="txt1"/>
<input type="button" value="点击改变文本框内容" οnclick="setText()"/>
</body>
</html>
接下来是在网页上点击按钮时,div显示或隐藏
<!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 showHide(){
var oDiv=document.getElementById("div1");
if(oDiv.style.display=="block"){
oDiv.style.display='none';
}
else{
oDiv.style.display='block';
}
}
</script>
<style>
#div1{
width:100px;
height:200px;
background:#F00;
display:none;
}
</style>
<body>
<input type="button" value="显示隐藏" οnclick="showHide()"/>
<div id="div1"></div>
</body>
</html>
接下来是在网页上点击按钮时,div改变颜色
<!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 toRed(){
var oDiv=document.getElementById("div1");
oDiv.className='box';
}
</script>
<style>
#div1{
width:100px;
height:100px;
border:1px solid black;
}
.box{
background:red;
}
</style>
<body>
<input type="button" value="改变div颜色" οnclick="toRed()"/>
<div id="div1"></div>
</body>
</html>
未完待续,请继续查看初探js魅力03