内联HTML IE 8

debugcn 发表于 Dev

用户名

我是一名Javascript Noobie-遇到了一些跨平台问题:-)附加的代码在Firefox / Safari等中可以正常工作，但在IE 8中当然不能

它应该是一个简单的公开。show / hide div可以正常工作，只是文本不会更改以显示新状态。

我知道这是innerHTML的问题-但我不知道如何解决...

请帮助...从昨天开始就一直把我的头撞在这堵墙上。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <style type="text/css">
            body { border: 0px; }
            *{ font: 11px \Lucida Grande\, Verdana, sans-serif; }
            table { width:100% ; border: 0px ; border-spacing: 0px ; table-layout: fixed ; }
            td { border: 0px }
            .values { vertical-align:text-top }
            .labelGreen { font-weight:bold ; color: #008000 ; } 
            td.auto { width:auto; } 
            .empty { margin:auto }
            ul { list-style: none; margin: 0; padding: 0;} 
            a { color: #888; text-decoration: none; font-weight: bold; font-size: 10px; }
        </style>
        <script type="text/javascript">
            function toggle_visibility1(id)
            {
                var e = document.getElementById(id);
                if (e.style.display == "none")
                {
                    e.style.display = "block";
                    document.getElementById("triOpen1").innerHTML = "<a href="javascript:openTri()">Close</a>";
                }
                else {
                    e.style.display = "none";
                    document.getElementById("triOpen1").innerHTML = "<a href="javascript:cloTri()">Open</a>";
                }
            }
        </script>
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <td class="auto" colspan ="4">These entities, related to THIS Methodology, are already included in this Model Extract</td>
            </tr>
            <tr>
                <td class="labelGreen"><a href="#tri" onclick="toggle_visibility1('tri1');"><span id="triOpen1">Open</span></a>&nbsp;ABBS 5 </td>
                <td class="labelGreen">Devices 15</td>
                <td class="labelGreen">Processes 2</td>
                <td class="labelGreen">Tests 13</td>
            </tr>
        </table>
        <div id="tri1" style="display:none;">
            <table>
                <tr>
                    <td class="values">Abbs List to go here</td>
                    <td class="values">Dev List to go here</td>
                    <td class="values">Process List to go here</td>
                    <td class="values">Testing List</td>
                </tr>
            </table>
        </div>
    </body>
</html>

塔尔莫

尝试改用innerText。

     function toggle_visibility1(id)
        {
            var e = document.getElementById(id);
            if (e.style.display == 'none')
            {
                e.style.display = 'block';
                document.getElementById('triOpen1').innerText = "Close";
            }
            else {
                e.style.display = 'none';
                document.getElementById('triOpen1').innerText = "Open";
            }
        }

似乎与此SO有关：为什么document.getElementById（'tableId'）。innerHTML在IE8中不起作用？

如果不想将html附加到现有内容，那么innerText是一种简单的解决方案。如果要添加html，则我应该采用这种解决方案：

 function toggle_visibility1(id)
        {
            var e = document.getElementById(id);
            if (e.style.display == 'none')
            {
                e.style.display = 'block';

                switchElementContent('triOpen1','<a href="javascript:openTri()">Close</a>');
            }
            else {
                e.style.display = 'none';

                switchElementContent('triOpen1','<a href="javascript:cloTri()">Open</a>');
                container.appendChild(newdiv);
            }
        }

 function switchElementContent(elementId, newContent) 
        {
            var container = document.getElementById(elementId);
            container.innerText = '';
            var newdiv = document.createElement("div");
            newdiv.innerHTML = newContent;
            container.appendChild(newdiv);
        }

第二个选择基于此SO：https : //stackoverflow.com/a/9000029/3020903

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。