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

<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>


 
 <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 Document
var 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;xif(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>

<body> 

<dl>
<dt onclick="list1(this)" >上层项目dt>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
dl>



<dl>
<dt onclick="list1(this)" >上层项目dt>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
dl>

<dl>
<dt onclick="list1(this)" >上层项目dt>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
dl>

<dl>
<dt onclick="list1(this)" >上层项目dt>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
<dd>fdfdfdsfdkohbjkvnbifjdd>
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; xif(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>

你可能感兴趣的:(js)