JavaScript DOM 中setAttribute()的使用以及点击鼠标返回函数的处理

来源：互联网发布：windows to go u盘推荐编辑：程序博客网时间：2024/05/29 04:48

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#demo{
position:absolute;
top:210px;
left:250px;
}
ul{
margin:0;
padding-left:170px;
list-style-type:none;
}
li{
float:left;
margin-right:70px;
}
li:hover{
border-bottom:3px solid #F00;
}
a:link,a:visited{
text-decoration:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#000;
}
</style>
<script>
function showPic(whpic)
{
var source=whpic.getAttribute("href"); /*获取当前对象的href值*/
var ple=document.getElementById("demo"); /*创建要修改URL目标的一个对象*/
ple.setAttribute("src",source); /*用setAttribute()函数舍设置修改属性值*/
//ple.src=source;
}
</script>
</head>

<body>
<h1>Snashops</h1>
<ul>
<li><a href="0925362321-2.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Fireworks</a></li> 
<li><a href="1494730132.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Coffee</a></li>
<li><a href="2127824714.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Rose</a></li>
<li><a href="2199331661.jpg" onMouseOver="showPic(this)" onClick="showPic(this);return false;" >Big Ben</a></li>
</ul>
<img id="demo" src="200912317295935977803.jpg" title="images_05" alt="myimg" />
</body>

</html>

实际效果图：

return false 语句的实际效用；

自己写的一个类似功能的HTML，处理机制不一样，上面代码更加兼容和便于扩充或增加新的功能

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#demo{
position:absolute;
top:210px;
left:250px;
}
ul{
margin:0;
padding-left:170px;
list-style-type:none;
}
li{
float:left;
margin-right:70px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#000;
}
li:hover{
border-bottom:3px solid #F00;
cursor:pointer;
}

</style>
<script>
function fun1()
{
document.getElementById("demo").src="0925362321-2.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.qq.com");
}
function fun2()
{
document.getElementById("demo").src="1494730132.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.163.com");
}
function fun3()
{
document.getElementById("demo").src="2127824714.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.baidu.com");
}
function fun4()
{
document.getElementById("demo").src="2199331661.jpg";
var mm=document.getElementById("test");
mm.setAttribute("href","http://www.taobao.com");
}
</script>
</head>

<body>
<h1>Snashops</h1>
<ul>
<li onMouseOver="fun1()">Fireworks</li>
<li onMouseOver="fun2()">Coffee</li>
<li onMouseOver="fun3()">Rose</li>
<li onMouseOver="fun4()">Big Ben</li>
</ul>
<a id="test" href="http://www.whdsnz.com"><img id="demo" src="200912317295935977803.jpg" alt="myimg" /></a>

</body>
</html>

1 0

JavaScript DOM 中setAttribute()的使用 以及点击鼠标返回函数的处理

JavaScript DOM 中setAttribute()的使用以及点击鼠标返回函数的处理