js CSS HTML的先后顺序问题,求解

前端领域优质创作者

博客专家认证

2015-08-05 12:55:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>树形菜单</title>

<style type="text/css">

	body{

		font-size:13px;

	}

	

	a{

		color:black;

		text-decoration:none;

	}

	

	img{

		border:none;

	}

	

	#pictures,#art{

		list-style:none;

		display:block;

	}

</style>

<script language="javascript">

	function showArt(){

		var status = document.getElementById("art").style.display;

		alert(status);

		if(status == "block")

			document.getElementById("art").style.display = "none";

		else

			document.getElementById("art").style.display = "block";

	}

	

	function showPictures(){

		var status = document.getElementById("pictures").style.display;

		if(status == "block")

			document.getElementById("pictures").style.display = "none";

		else

			document.getElementById("pictures").style.display = "block";

	}

	

	function addNode(){

		var content = document.getElementById("content").value;

		var ul = document.createElement("ul");

		ul.innerHTML = "<a href='javascript:show"+ content +"()'><img src='images/fclose.gif'>"+ content +"</a>";

		document.getElementById("tree").appendChild(ul);

	}

	

	// 删除节点的逻辑

	function deleteLast(){

		var father = document.getElementById("tree");

		var last   = father.lastChild;

		father.removeChild(last);

	}

</script>

</head>



<body>

	<div id="tree">

	<b><img src="images/fold.gif">树形菜单</b>

    <ul>

    	<a href="javascript:showArt()"><img src="images/fclose.gif">文学艺术</a>

    </ul>

    <ul id="art">

    	<li><img src="images/doc.gif">先锋写作</li>

        <li><img src="images/doc.gif">小说散文</li>

        <li><img src="images/doc.gif">精彩博文</li>

    </ul>

    <ul>

    	<a href="javascript:showPictures()"><img src="images/fclose.gif">贴图专区</a>

    </ul>

    <ul id="pictures">

    	<li><img src="images/doc.gif">我的相册</li>

        <li><img src="images/doc.gif">风景名胜</li>

        <li><img src="images/doc.gif">古香古韵</li>

    </ul>

    </div>

    <br />

    <br />

    节点内容：<input type="text" id="content" /><input type="button" value="添加节点" onclick="addNode()"/><input type="button" value="删除最后节点" onclick="deleteLast()" />

</body>

</html>

...全文

183 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2015-08-05

打赏
举报

你的问题和顺序无关 document.getElementById("art").style.display;取的只是内联样式中设置了的值。也就是元素的 style=""属性中写了的，一开始没有写style=""属性，自然是取得的是空了你把 if(status == "block") 改成 if(status != "none") 试试要获取元素实际呈现出的样式应该用 currentStyle对象（ie）或 getComputedStyle()方法（非ie）。

teayear 2015-08-05