当前位置: 代码迷 >> Web前端 >> 2013/一/21 dom操作
  详细解决方案

2013/一/21 dom操作

热度:899   发布时间:2013-11-08 17:51:58.0
2013/1/21 dom操作
1,定义数据封装的标签(定义界面)
2,确定事件源
3,注册时间
4,事件处理

需求:(html+css+javascript)
    页面中有一个新闻区域
通过超链接 大中小
可以让用户改变区域中的字体大小
javascript:void(0)

<script type="text/javascript" src="tuxingjs.js"></script>
<script type="text/javascript">
function changeMax()
{
//var divNode=document.getElementById("newsid");
divNode.style.fontSize="30px";
}
function changeSize(size)
{
//var divNode=document.getElementById("newsid");
var divNode=byId("newsid");
divNode.style.fontSize=size;
}
function changeSize2(className)
{
var divNode=byId("newsid");
divNode.className=className;
}
</script>
<style>
.max{
font-size:24px;
background-color:#CCFF00;
}
.min{
font-size:9px;
background-color:#66FF33;
}
.norm{
font-size:16px;
background-color:#FF0000;
}
</style>
</head>

<body>

<h2>新闻标题</h2>
<a href="javascript:void(0)" onclick="changeSize2('max')">大</a>
<a href="javascript:void(0)"onclick="changeSize2('norm')">中</a>
<a href="javascript:void(0)"onclick="changeSize2('min')">小</a><br />

<div id="newsid" >
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
</div>
</body>
</html>

结果:
单击大 字体变大背景变成黄色
单击中 字体16PX背景变成红色
单击小 字体9PX背景变成绿色


2,需求点击实现一个展开闭合效果(overflow属性)(event.srcElement)
获取事件源对象的两种方式
1,通过event.srcElement属性
2,将事件源对象通过this传入


<style type="text/css">
table{
border:#00FFCC 1px solid;

}
table td{
border:#FF0000 1px solid;
background-color:#CCFF33;
}
table td div{
background-color:#CCCC66;
display:none;
}
table td a:link,table td a:visited{
text-decoration:none;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list2(){
var aNode=event.srcElement;
var tdNode=aNode.parentNode;
var divNode=tdNode.getElementsByTagName("div")[0];
//alert(aNode.nodeName);
//alert(divNode.nodeName);
if(divNode.className=="open")
{
divNode.className="close";
}
else
{
divNode.className="open";
}
}
</script>
</head>

<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">还有菜单列表</a>
<div>
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a href="javascript:void(0)"  onclick="list2()">还有菜单列表</a>
<div>
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a href="javascript:void(0)"  onclick="list2()">还有菜单列表</a>
<div>
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
</div>
</td>
</tr>
</table>
</body>
</html>
结果:单击一个超链接开关效果





  相关解决方案