Javascript_10_DOM_练习
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript_10_DOM_练习，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4414字，纯文字阅读大概需要7分钟。
内容图文
Javascript_10_DOM_练习<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>DOM_实例练习</title>
<style type="text/css">
a:link,a:visited{
color: blue;
text-decoration: none;
}
a:hover{
color: red;
}
.large{
font-size: 26px;
}
.normal{
font-size: 16px;
}
.small{
font-size: 12px;
}
dl{
height: 16px;
overflow: hidden;
}
dl dt{
color: orange;
}
dl dd{
margin: 0px;
}
table ul{
list-style: none;
margin: 0px;
padding: 0px;
background-color: purple;
color: white;
display: none;
}
table{
border: #008FF0 dashed 1px;
}
table td{
border: #008FF0 dashed 1px;
background-color: orange;
}
.open_overflow{
overflow: visible;
}
.hidden_overflow{
overflow: hidden;
}
.block_display{
display: block;
}
.none_display{
display: none;
}
</style>
</head>
<body>
<h1>DOM_实例练习</h1>
<script type="text/javascript" src="a.js"> </script>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/*
* 需求：实现类似QQ好友列表效果
默认情况下：ul中的display: none;
当点击a时，打开所在的ul,display: block;其他仍然是display: none;
*/
<script type="text/javascript">
function list_ul(aNode){
//a的下一个兄弟是ul，但不建议使用
//a的父就是td，首先拿到td,对td用标签名拿ul
//拿所有的ul，和当前ul比较即可
var oTd=aNode.parentNode;
var oUl=oTd.getElementsByTagName("ul")[0];//当前ul
var collUl=document.getElementsByTagName("ul");
for (var i=0; i < collUl.length; i++) {
if (collUl[i]==oUl) {
if (oUl.className=="block_display") {
oUl.className="none_display";
} else{
oUl.className="block_display";
}
} else{
collUl[i].className="none_display";
}
}
}
</script>
<table>
<tbody>
<tr>
<td>
<a href="javascript:void(0)" onclick="list_ul(this)">红楼梦</a>
<ul>
<li>林黛玉</li>
<li>史湘云</li>
<li>薛宝钗</li>
<li>妙玉</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list_ul(this)">西游记</a>
<ul>
<li>唐僧</li>
<li>孙悟空</li>
<li>猪八戒</li>
<li>沙和尚</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list_ul(this)">水浒传</a>
<ul>
<li>鲁智深</li>
<li>林冲</li>
<li>武松</li>
<li>李逵</li>
</ul>
</td>
</tr>
</tbody>
</table>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
/*
* 需求：展开列表效果！
默认情况下：dl的overflow属性值是：hidden;
当点击dt的时候
dl的overflow属性值是：visible;
*/
<script type="text/javascript">
var flag=true;//设置为全局变量
function showDl_3(dtNode){
//有多个dl,每次只打开点击的DL
//DL是dt的父结点
//这个是改进版本2，先预定义样式，打开和关闭
var oDl=dtNode.parentNode;//获取当前dl
//接着获取所有dl,进行遍历，除了当前dl，其他全隐藏
var collDl=document.getElementsByTagName("dl");
for (var i=0; i < collDl.length; i++) {
if (collDl[i]==oDl) {
if (oDl.className=="open_overflow") {
oDl.className="hidden_overflow";
} else{
oDl.className="open_overflow";
}
}else{
collDl[i].className="hidden_overflow";
}
}
}
function showDl_2(){
//这个是改进版本，先预定义样式，打开和关闭
var oDl=document.getElementById("dl_id_1");
if (oDl.className=="open_overflow") {
oDl.className="hidden_overflow";
} else{
oDl.className="open_overflow";
}
}
function showDl_1(){
var oDl=document.getElementById("dl_id_1");
if(flag){
oDl.style.overflow="visible";
flag=false;
}else{
oDl.style.overflow="hidden";
flag=true;
}
}
</script>
<dl id="dl_id_1">
<dt onclick="showDl_3(this)">dt定义条目1</dt>
<dd>dd定义描述1—1</dd>
<dd>dd定义描述1—2</dd>
<dd>dd定义描述1—3</dd>
<dd>dd定义描述1—4</dd>
</dl>
<dl >
<dt onclick="showDl_3(this)">dt定义条目2</dt>
<dd>dd定义描述2—1</dd>
<dd>dd定义描述2—2</dd>
<dd>dd定义描述2—3</dd>
<dd>dd定义描述2—4</dd>
</dl>
<dl >
<dt onclick="showDl_3(this)">dt定义条目3</dt>
<dd>dd定义描述3—1</dd>
<dd>dd定义描述3—2</dd>
<dd>dd定义描述3—3</dd>
<dd>dd定义描述3—4</dd>
</dl>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<script type="text/javascript">
function changeFont(styleName){
var oDiv=document.getElementById("div_id_1");
oDiv.className=styleName;//这句是关键，重点！
}
</script>
/*
* 需求：仿造小说网站，大中小字体
*/
<a href="javascript:void(0)" onclick="changeFont('large')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('normal')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('small')">小字体</a>
<div id="div_id_1">
小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
小说正文小说正文小说正文小说正文小说正文小说正文小说正文小说正文
</div>
</body>
</html>以上就是Javascript_10_DOM_练习的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！
内容总结
以上是互联网集市为您收集整理的Javascript_10_DOM_练习全部内容，希望文章能够帮你解决Javascript_10_DOM_练习所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】