Javascript_10_DOM_운동
- 黄舟원래의
- 2017-01-18 16:38:301055검색
Javascript_10_DOM_Exercise
<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_exercise 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. )!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Javascript_9_DOM_node 연습다음 기사：Javascript_9_DOM_node 연습