js控制div的显示和隐藏

JavaScript010

js控制div的显示和隐藏,第1张

使用JavaScript控制div的显示隐藏，通常是修改div元素的display为none。

display属性 定义和用法

display 属性规定元素应该生成的框的类型。

display属性 可能的值

JavaScript控制div的隐藏

比如我们有一个id为div1的div元素

<div id="div1"></div>

隐藏，代码如下

document.getElementById("div1").style.display="none"

显示，代码如下

document.getElementById("div1").style.display="block"

其他方式

除了修改display,还可以通过修改元素的宽度和高度为零实现隐藏效果。

当然不在了，隐藏有display:none和visibility:hidden'

你现在的状况应该用onmouseout style="visibility:hidden"onmouseover style="visibility:visible"

如果display:none了，这个div就从文档流中消失了，自然就没法出发 ONMOUSEOVER事件了

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

<title>通过选择项显示不同的结果</title>  

<head>  

<script type="text/JavaScript">  

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  

    }  

}  

</script>  

</head>  

<body>  

<select title="城市" id="city" onchange="showdiv()">  

<option selected value="广州">广州</option>  

<option value="南昌">南昌</option>  

<option value="沈阳">沈阳</option>  

</select>  

<div  id="div1" style="display:none"  >您选择了广东的省会<input type="text" id="text1" value=""/></div>  

<div  id="div2" style="display:none"  >您选择了江西的省会<input type="text" id="text2" value=""/></div>  

<div  id="div3" style="display:none"  >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>  

</body>  

</html></pre><pre class="html" name="code"> </pre><pre class="html" name="code"> </pre>  

<pre></pre>

效果图：

定义和用法

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