位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 显示和隐藏

提问人:刘团圆发布时间:2020-11-27

■知识点

    使用style.display属性可以设计元素的显示和隐藏。恢复style.display属性的默认值,只需设置style.display 属性值为空字符串(style.display ="")即可。

■实例设计

下面设计一个扩展函数,根据参数决定其是否进行显示或隐藏。

//设置或切换元素的显示或隐藏

//参数:e表示操作元素,b为ture时,将显示元素e; b为false时,将隐藏元素e 

//如果省略参数b,则根据元素e的显示状态,进行显示或隐藏切换

function display(e, b){

    //如果第2个参数存在且不为布尔值,则抛出异常

    if(b && (typeof b != "boolean") ) throw new Error ("第2个参数应该是布尔值!");

    var c = getStyle (e, "display");            //获取当前元素的显示属性值

    (c != "none") && (e._display = c);          //记录元素的显示性质,并存储到元素的属性中 

    e._display = e._display I I                    //如果没有定义显示性质,则赋值为空字符串

    if (b II (C == "none") ){                    //当第2个参数值为true或者元素隐藏时

        e. style, display = e._display;              //则将调用元素属性值恢复元素或显示元素

    }

    else {

        e.style.display = "none";                 //否则隐藏元素

    }

}

下面在页面中设置一个向右浮动的元素p。连续调用3次display()函数后,则相当于隐藏元素。

<p style="float:right; border:solid lpx red; width:lOOpx;height:lOOpx;n>pl</p> 

<script>

var p = document. getElementsByTagName ("p") [0];

display(p);                        //切换隐藏

display(p);                        //切换显示

display(p);                        //切换隐藏

</script>

按如下方式调用,则会显示元素。

display(p , true);              //强制显示

继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
返回顶部