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

teayear
前端领域优质创作者
博客专家认证
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>
...全文
158 3 打赏 收藏 举报
写回复
3 条回复
切换为时间正序
当前发帖距今超过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
浏览器加载顺序,我alert样式的display,显示的是空的为什么哦?有点郁闷,需要点两次a链接才会出来
  • 打赏
  • 举报
回复
zpjshiwo77 2015-08-05
你是指浏览器加载顺序问题?还是在写代码的时候的顺序?
  • 打赏
  • 举报
回复
相关推荐
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> index3.<em>html</em> <html> 最简树形菜单