JavaScript之浏览器兼容问题

最新推荐文章于 2023-08-17 19:01:04 发布

ScFontEnd

最新推荐文章于 2023-08-17 19:01:04 发布

阅读量311

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u012785614/article/details/48847545

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在不同浏览器环境下修改HTML表单元素type属性时遇到的兼容性问题，并提供了一种解决方案，即通过隐藏原始按钮并在相同位置显示复选框来替代直接更改type属性的方法。

JavaScript之浏览器兼容问题

- JavaScript之浏览器兼容问题
  - 表单的兼容性问题
    - 示例1修改表单的type属性

表单的兼容性问题

示例1：修改表单的type属性

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>修改表单的type属性</title>
    </head>
    <body>
        <input type="button" id="chgInp"/>
        <script type="text/javascript">
            var oInput = document.getElementById('chgInp');
            oInput.onclick = function () {
                oInput.type = 'checkbox';
            };
        </script>
    </body>
</html>

注意：

以上代码在IE6、IE7、IE8下就会报语法错误，而在IE9+和其它非IE浏览器下则不会报错

解决方法：

这段代码所要实现的效果无非是想点击button之后，更换成checkbox，其实只要点击button之后，让button隐藏起来，让checkbox在button的位置上显示出来即可。