当前位置：首页 > news >正文

一初探js特效魅力之div显示隐藏变色02

news 来源：原创 2024/5/19 9:35:07

初探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>

接下来是在网页上点击按钮时，文本框内容改变

接下来是在网页上点击按钮时，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>

</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>

</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