当前位置: 代码迷 >> JavaScript >> ul的display:block设置有关问题
  详细解决方案

ul的display:block设置有关问题

热度:98   发布时间:2012-05-29 12:16:00.0
ul的display:block设置问题
<div onclick="myrelease();" id="title"><a>我的发布</a></div>
  <ul id="release_left" style="display:block;">
  <li><a href="最近上传.html" class="over">最近上传</a></li>
  <li><a href="显示中信息.html">显示中的信息</a></li>
  <li><a href="审核中信息.html">审核中的信息</a></li>
  <li><a href="已删除信息.html">已删除的信息</a></li>
  </ul>

function myrelease(){
var div = document.getElementById("release_left");
alert(div.style.display);
if (div.style.display == "block" ){
div.style.display = "none";
}else if(div.style.display == "none"){
div.style.display = "block";

}

 想实现二级收缩菜单功能,为什么<ul id="release_left" style="display:block;">中的display:block,写在样式表中无效。



------解决方案--------------------
div.style 是获取div的style属性的。你写在样式表中当然获取不到拉。
我看这样就挺好。不要再给自己找麻烦了。
------解决方案--------------------
HTML code


<html><head></head><body>

<div onclick="myrelease();" id="title"><a>我的发布</a></div>
  <ul id="release_left" style="display:block;">
  <li><a href="最近上传.html" class="over">最近上传</a></li>
  <li><a href="显示中信息.html">显示中的信息</a></li>
  <li><a href="审核中信息.html">审核中的信息</a></li>
  <li><a href="已删除信息.html">已删除的信息</a></li>
  </ul>
<script>
function myrelease(){
var div = document.getElementById("release_left");
alert(div.style.display);
if (div.style.display == "block" ){
div.style.display = "none";
}else if(div.style.display == "none"){
div.style.display = "block";
}  
}    
</script>
</body></html>

以上代码本人测试过了没问题,看你的了

------解决方案--------------------
是这样的,楼主,
dom.style 只能取到行内的css, 也就是只能取到 style="这里的css"
要想取到<style></style>中或者 外联的css样式,需要"计算"来取得css

参考下

HTML code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <button id="btn">弹出层</button>
        <script>
            function $(o){return document.getElementById(o)}
            
            var css = function(obj, attr, value){
                switch(arguments.length){
                    case 2:
                        //二个参数, 如果第二个参数是对象, 批量设置属性
                        if(typeof attr == 'object'){ 
                            for(var i in attr){
                                obj.style[i] = attr[i];
                            }
                        }
                        //二个参数, 如果第二个参数是字符串, 读取属性值
                        else{
                            return obj.currentStyle? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];
                        }
                        break;
                    case 3:
                        //三个参数, 单一设置属性
                        obj.style[attr] = value;
                        break;
                    default:
                        alert('参数有误!');
                }
            }
            var o = $('btn');
            
            alert( css(o, 'fontSize') )
            
            css(o, {
                fontSize: 123+'px',
                color: 'red'
            })
            
        </script>
    </body>
</html> 
  相关解决方案