如何使用js动态显示或隐藏DIV

2024-12-16 09:23:41
推荐回答(2个)
回答1:

思路:实现这个方法主要用到了setAttribute方法

通过选择项显示不同的结果  
  
  
function showdiv()  
{  
    var doc=document;  
    var citytext=doc.getElementById("city").value;  
    var div1=doc.getElementById("div1");  
    var div2=doc.getElementById("div2");  
    var div3=doc.getElementById("div3");  
    switch (citytext)  
    {  
        case "广州":            
            div1.setAttribute("style","display");             
            div2.setAttribute("style","display:none");  
            div3.setAttribute("style","display:none");  
            doc.getElementById("text1").value=citytext;  
            break;  
        case "南昌":  
            div1.setAttribute("style","display:none");  
            div2.setAttribute("style","display");  
            div3.setAttribute("style","display:none");  
            doc.getElementById("text2").value=citytext;  
            break;  
        case "沈阳":  
            div1.setAttribute("style","display:none");  
            div2.setAttribute("style","display:none");  
            div3.setAttribute("style","display");  
            doc.getElementById("text3").value=citytext;  
            break;  
    }  
}  
  
  
  
  
广州  
南昌  
沈阳  
  
您选择了广东的省会
  
您选择了江西的省会
  
您选择了辽宁的省会
  
  
    

效果图:

定义和用法

setAttribute() 方法添加指定的属性,并为其赋指定的值。

回答2:

最简单的方法,在div的style属性里面加上display:none;然后,如果需要显示就用element.show();隐藏就用 element.hide();

相关问答
最新问答