jsday06补充(字体大中小结合css和js 列表list 只显示单个和缩放)

来源：互联网发布：网上上课的软件编辑：程序博客网时间：2024/05/16 16:05

<script type="text/javascript" src="doctool.js"></script><script type="text/javascript">function changeMax(){    var divNode = document.getElementById("newid");    divNode.style.fontSize="20px";    //alert("xx");  }function changeMid(){    var divNode = document.getElementById("newid");    divNode.style.fontSize="16px";    //alert("xx");  }function changeMin(){    var divNode = document.getElementById("newid");    divNode.style.fontSize="9px";    //alert("xx");  }function changeSize(size){    //var divNode = document.getElementById("newid");    var divNode=byId("newid");    //divNode.style.fontSize=size;    //alert("xx");  }function changeSize1(className){    //var divNode = document.getElementById("newid");    var divNode=byId("newid");    divNode.className=className;    }</script><style type="text/css">div,.norm{    background-color:#F00;    color:#C03;    font-size:16px;    width:300px;}.max{    background-color:#066;    color:#FF0;    font-size:24px;}.min{    background-color:#390;    color:#6F3;    font-size:9px;}</style></head><body><!--1、定义数据封装的标签 (定义界面)2、确定事件源3、注册事件4、事件处理例子页面中有一个新闻区域通过超链接 大中小可以让用户改变区域中的字体大小 --> <!--js用来取消超链接效果--> <h2>新闻标题</h2> <a href="javascript:void(0)" onclick="changeSize1('max')" >大</a> <a href="javascript:void(0)" onclick="changeSize1('norm')" >中</a> <a href="javascript:void(0)" onclick="changeSize1('min')" >小</a><br/> <div id="newid" > 的方式发到所发生的<br/> 的方式发到所发生的<br/> 的方式发到所发生的<br/> 的方式发到所发生的<br/> </div></body>

doctool

// JavaScript Documentvar doc = document;function byId(id){    return doc.getElementById(id);}

注意方法的名字和打开时的大小不然可能叠在一起

<script type="text/javascript" src="doctool.js"></script><script type="text/javascript">var b= true;function change(){    //var divNode = document.getElementsByTagName("div")[0];    var divNode = byTag("div")[0];    //alert(divNode.nodeName);          /*if(b)    {        divNode.style.height="8px";        divNode.style.overflow="hidden";            b=false;    }    else    {        divNode.style.height="8px";        divNode.style.overflow="visible";           b=true;    }*/    if(divNode.className=="close")/*如何判断类选择器*/    {        divNode.className="open";    }    else    {        divNode.className="close";      }}function list(dtNode){    //var dtNode = byTag("dt")[0];    //var dlNode = byTag("dl")[0];    //var dtNode = event.srcElement;        var dlNode = dtNode.parentNode;    //alert(dtNode.nodeName);   //alert(dtNode.nodeName+"..."+dlNode.nodeName);    if(dlNode.className=="open")    {        dlNode.className="close";       }    else    {        dlNode.className="open";        }}function list1(dtNode){    var dlNode = dtNode.parentNode;    var dlNodes = byTag("dl");    alert(dlNodes.length);    for(var x= 0;x<dlNodes.length;x++)    {        if(dlNodes[x]==dlNode)        {            if(dlNode.className=="open")            {                dlNode.className= "close";              }            else            {                dlNode.className= "open";               }        }        else             dlNodes[x].className= "close";    }}/*获取事件源对象的两种方式1、通过event 对象的srcElement属性2、将事件源对象通过this传入*/</script><style type="text/css">.open{    overflow:visible;    height:80px;}.close{    overflow:hidden;    height:16px;    }dl{    overflow:hidden;    height:16px}</style></head><!-- 通过点击实现一个展开闭合的效果<div  onclick="change()">感到十分广泛大锅饭隧道股份董事</div>--><body> <dl><dt onclick="list1(this)" >上层项目</dt><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd></dl><dl><dt onclick="list1(this)" >上层项目</dt><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd></dl><dl><dt onclick="list1(this)" >上层项目</dt><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd></dl><dl><dt onclick="list1(this)" >上层项目</dt><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd><dd>fdfdfdsfdkohbjkvnbifj</dd></dl></body>

只能打开第三个而且不能缩放有bug for循环里面的else 应该选择关闭其他的只保留当前的不然会出现仅最后一个能开而且不能再缩放即用nodes[x] 代替node 可解决

<script type="text/javascript">function list(){    var aNode = event.srcElement;    //alert(aNode.nodeName);    var tdNode = aNode.parentNode;    //alert(tdNode.nodeName);    var divNode= tdNode.getElementsByTagName("div")[0];    //alert(divNode.nodeName);    var tabNode = document.getElementsByTagName("table")[0];    var divNodes = tabNode.getElementsByTagName("div");    //alert(divNodes.length);    for(var x=0; x<divNodes.length;x++)    {        if(divNodes[x]==divNode)        {            if(divNode.className=="open")            {                divNode.className="close";            }            else            {                divNode.className="open";            }           }           else        {            divNodes[x].className="close";          }    }    //alert(tdNode.nodeName);   }</script><style type="text/css">table{    background-color:#0C6 1px solid;    }table td{    border:#F00 1px solid;    background-color:#0FC;    }table td div{    background-color:#9F3;    display:none;}table td a:link,table td a:visited{    color:#C00;    text-decoration:none}   .open{display:block;}.close{display:none;}   </style></head><body><table>    <tr>        <td><a href="javascript:void(0)" onclick="list()">好友菜单</a>            <div>                反倒是多少<br/>                反倒是多少<br/>                反倒是多少<br/>                反倒是多少<br/>            </div>        </td>    </tr>    <tr>        <td><a href="javascript:void(0)" onclick="list()">好友菜单</a>            <div>                反倒是多少<br/>                反倒是多少<br/>                反倒是多少<br/>                反倒是多少<br/>            </div>        </td>    </tr>    <tr>        <td><a href="javascript:void(0)" onclick="list()">好友菜单</a>            <div>                反倒是多少<br/>                反倒是多少<br/>                反倒是多少<br/>                反倒是多少<br/>            </div>        </td>    </tr></table></body>

阅读全文

0 0

jsday06补充(字体大中小 结合css和js 列表list 只显示单个 和缩放)

jsday06补充(字体大中小结合css和js 列表list 只显示单个和缩放)