javascript重点实用实例!

来源：互联网发布：linux 交互式命令编辑：程序博客网时间：2024/05/12 03:11

javascript中动态改变页面字体大小：

<title>动态改变字体大小</title>

.max{

width:500px;

background-color:#00FF66;

font-size:36px;

color:#330099;

}

.normal{

width:500px;

background-color:#FF9933;

color:#FF0000;

font-size:24px;

}

.min{

width:500px;

color:#FFFF00;

background-color:#FF00CC;

font-size:16px;

}

</style>

function changeSize(className){

var node=document.getElementById("divid");

node.className=className;

}

</script>

</head>

<body>

<a href="javascript:void(0)" onClick="changeSize('min')">小</a><br/>//双引号中间一定得用单引号

恶化服务费和违法后位富翁复合物i恶风<br/>

</div>

</body>

</html>

javascript模仿QQ联系人列表效果：

注：实现可多级展开效果：strecthClose( );实现只能打开一个列表的效果：listOnlyOne( )

<title>js模仿QQ列表效果</title>

table{

border:1px #00FF66 solid;

}

table td{

border:1px solid #FF9933;

}

a:link,a:visited{

text-decoration:none;

color:#CC33CC;

}

.open{

display:block;

}

.close{

display:none;

}

</style>

function strecthClose(aNode){

var tdNode=aNode.parentNode;

var divNode=tdNode.getElementsByTagName("div")[0];

if(divNode.className=="open")

divNode.className="close";

else

divNode.className="open";

}

function listOnlyOne(aNode)

{

var tdNode=aNode.parentNode;

var divNode=tdNode.getElementsByTagName("div")[0];

var divNodes=document.getElementsByTagName("div");

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

}

</script>

</head>

<body>

<table>

<tr>

<td>

水电费过水电费</br>

</div>

</td>

</tr>

<tr>

<td>

水电费过水电费</br>

</div>

</td>

</tr>

<tr>

<td>

水电费过水电费</br>

</div>

</td>

</tr>

<tr>

<td>

水电费过水电费</br>

</div>

</td>

</tr>

</table>

</body>

</html>