Why am I not able to show or hide in Internet Expl

2019-03-05 04:11发布

站内问答 / JavaScript
1330 6 3

I have written JavaScript code to show and hide the div. But I got stuck when it is not working in Internet Explorer 8. It is working smoothly in other browsers, like Opera, Firefox etc.

Here is my code:

<html>
    <head>
        <title>Javascript Show Hide Div Visibility</title>

        <style type="text/css">
        </style>

        <script language="javascript" type="text/javascript">
        function showHideDiv()
        {
            var divstyle = new String();
            divstyle = document.getElementById("div1").style.visibility;
            if(divstyle.toLowerCase()=="visible" || divstyle == "")
            {
                document.getElementById("div1").style.visibility = "hidden";
            }
            else
            {
                document.getElementById("div1").style.visibility = "visible";
            }
        }
        </script>
    </head>

    <body>
        <div id="div1" class="divStyle">
            <object width="300" height="300">
                <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U">
                </param>
                <embed src="http://www.youtube.com/v/7_6B6vwE83U"
                       type="application/x-shockwave-flash"
                       width="300"
                       height="300">
                </embed>
            </object>
        </div>

        <center>
             <div onclick="showHideDiv()">Click Me For show hide <div>
        </center>
    </body>
</html>

6条回答
Summer. ? 凉城
2楼-- · 2019-03-05 04:31

Try using display:

function showHideDiv()
{
    var divstyle = new String();
    divstyle = document.getElementById("div1").style.display;
    if(divstyle.toLowerCase()=="block" || divstyle == "")
    {
        document.getElementById("div1").style.display= "none";
    }
    else
    {
        document.getElementById("div1").style.display= "block";
    }
}
查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
3楼-- · 2019-03-05 04:32

There is a filter property (style.filter) that IE8 sets it to alpha(opacity=0). Just set it to undefined and the element pops up again.

查看更多
0人赞 添加讨论(0) 举报
一夜七次
4楼-- · 2019-03-05 04:34

The respondents that have tested it all report that it works fine in their IE8. That would leave three options open:

  1. No Doctype declaration (I'm assuming the testers put that over it manually).
  2. It concerned an intranet site, temporarily or permanently. IE8+ has a Compatibility Mode/View (= IE7), which it defaults to in case an intranet site is requested. Exceptions are made for sites of which the URL starts with 'localhost' of '127.0.0.1', the address of the on-computer server(-simulator), if installed.
  3. The OP had his IE8 set to 'View all sites in Compatibility Mode/View'.
查看更多
0人赞 添加讨论(0) 举报
做个烂人
5楼-- · 2019-03-05 04:36

Your page works just fine in Firefox 4 and Internet Explorer 8 on Windows XP.

Yours: http://jsfiddle.net/mplungjan/2KZ47/

Mine: http://jsfiddle.net/mplungjan/7bxrB/

<html>
    <head>
        <title>Javascript Show Hide Div Visibility</title>

        <style type="text/css">
            .center {text-align:center}
            #div1 {visibility:visible}
        </style>

        <script language="javascript" type="text/javascript">
            function showHideDiv() {
               var div = document.getElementById("div1");
               div.style.visibility=(div.style.visibility==="visible"||div.style.visibility==="")?"hidden":"visible";
            }
        </script>
    </head>

    <body>
        <div id="div1" class="divStyle">
        ...
        </div>

        <div class="center" onclick="showHideDiv()">Click Me For show hide <div>
    </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
6楼-- · 2019-03-05 04:38

jQuery is your best friend when working with DOM.

<style type="text/css">
  .hidden {
    visibility: hidden;
  }
</style>

<script type="text/javascript">
    $(function(){
        $('.trigger').click(function(){
            $('#div1').toggleClass('hidden');
        });
    });
</script>

<div id="div1" class="divStyle">
    <object width="300" height="300">
        <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U"></param>
        <embed src="http://www.youtube.com/v/7_6B6vwE83U" type="application/x-shockwave-flash" width="300" height="300"></embed>
    </object> 
</div>

<center>
    <div class="trigger">Click Me For show hide</div>
</center>
查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
7楼-- · 2019-03-05 04:42

try:

var div1 = document.getElementById("div1");
if(div1.style.display=="none" || div1.style.display == ""){
  document.getElementById("div1").style.diplay = "block";
}
else{
  div1.style.display = "none";
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(3)