JavaScript 兼容性问题答案

【问题标题】：JavaScript compatibility issueJavaScript 兼容性问题
【发布时间】：2017-03-31 06:18:52
【问题描述】：

我进行了大量研究，但找不到使脚本兼容所有浏览器的代码。我希望此功能可以在 Firefox、IE、Chrome 等中使用，但目前，它仅适用于 Chrome 和 Firefox 49 版之前的版本。非常感谢任何帮助。代码如下：

<head>
    <script type="text/javascript">
        function toggle(tag) {
            var x = document.getElementsByName(tag)[0];
            var a = x.parentNode
            if (a.style.display == 'block') {
                a.style.display = 'none'
            } else {
                a.style.display = 'block'
            }
        }


        function init() {
            //this function will add show hide functionality to paired list items,
            //as long as the answer is a list item straight after the question list item.
            //You can also have as many separate lists as you want.
            //all lists must be contained within a div with id QA

            var obj = document.getElementById('QA');
            var elements = obj.getElementsByTagName('li');
            var index = 1
            //add javascript to question elements
            //you could also add styling to question elements here
            for (var i = 0; i < elements.length; i += 2) {
                var element = elements[i];
                element.innerHTML = "<a href='javascript:toggle(" + index + ")'>" + element.innerHTML + "</a>"
                index = index + 1
            }
            //add bookmark to answer elements and add styling
            var index = 1
            for (var i = 1; i < elements.length; i += 2) {
                var element = elements[i];
                element.innerHTML = "<a name='" + index + "' id='" + index + "'></a>" + element.innerHTML
                index = index + 1
                element.style.padding = '0px 0px 10px 20px' //add indent to answer
                element.style.listStyleType = 'none' //remove bullet
                element.style.display = 'none' //hide answer element
            }
        }

        window.onload = init;
    </script>
</head>

【问题讨论】：

你在哪里调用这个切换方法
浏览器控制台出现什么错误？
另一件事不要使用最好在 onclick 或 somehting 上使用它
获得跨浏览器兼容性的一种方法是使用像 jQuery 这样的库。
这段代码都在脑子里。其余代码在正文中：
问题 1

答案 1

问题 2

答案2

问题3

答案3

问题4

答案4

标签： javascript compatibility

【解决方案1】：

根据您的主体结构，Document.getElementsByName() 在不同浏览器之间的行为可能不同：

getElementsByName 方法在不同浏览器中的工作方式不同。在 IE & Opera 中，getElementsByName() 方法还将返回具有指定值的 id 属性的元素。所以你应该注意不要使用相同的字符串作为名称和 ID。

Source

【讨论】：

如果它们在 same 元素上，您可以同时使用它们，例如<input name="foo" id="foo" type="text"> 应该没问题。