`
chinachuner
  • 浏览: 64734 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

IE浏览器存在的setAttribute bug

IE浏览器JavaScriptHTMLjQuery 
阅读更多

IE的setAttribute中与标准浏览器的有许多不同，主要表现在IE对setAttribute的功能上有些限制，就是不能用setAttribute来设定class、style于onclick等事件的值以及设置name属性，那这样就会导致setAttribute在IE浏览器里失去很多的用途！而在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。不过当然这bug已经在最新版的IE8中被修复，详情可以浏览微软官网给出的资料。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。

 

微软的相关资料：NAME Attribute | name Property

<!doctype html>

<html dir=”ltr” lang=”zh-CN”>

  <head>

    <meta charset=”utf-8″/>

    <title>setAttribute bug  By 司徒正美</title>

    <meta http-equiv=”X-UA-Compatible” content=”IE=7″>

    <script type=”text/javascript”>

      window.onload = function(){

        var form = document.createElement(”form”);

        var input = document.createElement(”input”);

        var root = document.body;

        input.setAttribute(”name”, “test”);

        root.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏

        form.appendChild(input);      

        alert(form.elements.test)   

      }

    </script>

 

  </head>

  <body>

    <h3>请在IE6与IE7下浏览，当然IE8也可以，我已让IE8处在IE7的兼容模式下运作。兼容模式连bugs也兼容了……</h3>

  </body>

</html>

 

解决办法有两个，如用innerHTML，觉得innerHTML真是一个伟大的发明

 

 

<!doctype html>

<html dir=”ltr” lang=”zh-CN”>

  <head>

    <meta charset=”utf-8″/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv=”X-UA-Compatible” content=”IE=7″>

    <script type=”text/javascript”>

      window.onload = function(){

        var body = document.body;

        var form = document.createElement(”form”);

        form.innerHTML = “<input name=’test’ type=’text’ />”

        body.appendChild(form);

        alert(form.elements.test)

      }

    </script>

 

  </head>

  <body>

    <h3>请在IE6与IE7下浏览</h3>

  </body>

</html>

 

另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。

 

 

<!doctype html>

<html dir=”ltr” lang=”zh-CN”>

  <head>

    <meta charset=”utf-8″/>

    <title>setAttribute bug </title>

    <meta http-equiv=”X-UA-Compatible” content=”IE=7″>

    <script type=”text/javascript”>

      window.onload = function(){

        var body = document.body;

        var form = document.createElement(”form”);

        try{

          var input = document.createElement(”<input type=’text’ name=’test’>”);

        }catch(e){

          var input = document.createElement(”input”);

          input.setAttribute(”name”, “test”)

        }

        body.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏

        form.appendChild(input);

        alert(form.elements.test)

      }

    </script>

 

  </head>

  <body>

    <h3>请在IE6与IE7下浏览</h3>

  </body>

</html>

 

但name只是冰山一角，setAttribute在设置属性时，有许多属性在IE下与标准浏览器的命名是不一样的，看一下jQuery，发现它也是不全的。许多地雷埋在这里，总有一个你迟早会中的。下面是一个详尽的参照表：左边为标准游览器的，右边是IE的。

 

var IEfix = { 

 acceptcharset: “acceptCharset”, 

 accesskey: “accessKey”, 

 allowtransparency: “allowTransparency”, 

 bgcolor: “bgColor”, 

 cellpadding: “cellPadding”, 

 cellspacing: “cellSpacing”, 

 “class”:  “className”, 

 colspan:  “colSpan”, 

 checked: “defaultChecked”, 

 selected: “defaultSelected”, 

 “for”:  “htmlFor” , 

 frameborder:  “frameBorder”, 

 hspace:  “hSpace”, 

 longdesc:  “longDesc”, 

 maxlength:  “maxLength”, 

 marginwidth:  “marginWidth”, 

 marginheight:  “marginHeight”, 

 noresize:  “noResize”, 

 noshade:  “noShade”, 

 readonly: “readOnly”, 

 rowspan:  “rowSpan”, 

 tabindex:  “tabIndex”, 

 valign:  “vAlign”, 

 vspace:  “vSpace”

}

IE不能用setAttribute为dom元素设置onXXX属性，换言之，不能用setAttribute设置事件。

 

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var body = document.body;

        var form = document.createElement("form");

        form.innerHTML = "<input name='test' type='text' />"

        body.appendChild(form);

        form.elements.test.setAttribute("onfocus", "alert(this.name)");

      }

    </script>

  </head>

  <body>

    <h3>用setAttribute设置事件</h3>

    <p>在IE下文本域获得焦点后并没有弹出预期的alert!</p>

  </body>

</html>

IE要直接赋给一个函数！

var body = document.body; 

 

var form = document.createElement(“form”); 

form.innerHTML = “<input name=’test’ type=’text’ />”

body.appendChild(form); 

if(!+“\v1″){ 

  form.elements.test.setAttribute(“onfocus”, function(){alert(this.name)}); 

}else{ 

  form.elements.test.setAttribute(“onfocus”, “alert(this.name)”); 

}

 

 

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var body = document.body;

        var form = document.createElement("form");

        form.innerHTML = "<input name='test' type='text' />"

        body.appendChild(form);

        if(!+"\v1"){

          form.elements.test.setAttribute("onfocus", function(){alert(this.name)});

        }else{

          form.elements.test.setAttribute("onfocus", "alert(this.name)");

        }       

      }

    </script>

  </head>

  <body>

    <h3>IE用setAttribute设置事件要直接赋函数！</h3>

  </body>

</html>

在IE6与IE7中也不能用setAttribute设置样式:dom.setAttribute(”style”,”font-size:14px”)

 

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

       var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';

        var h3 = document.getElementsByTagName("h3")[0]

 

        h3.setAttribute(’style’, styleData);

      }

    </script>

  </head>

  <body>

    <h3>IE6与IE7看不到效果！</h3>

  </body>

</html>

这时要统一用dom元素的style.csstext属性赋值比较安全。

 

 

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';

        var h3 = document.getElementsByTagName("h3")[0]

        if(!+”\v1″){

          //use the .cssText hack

          h3.style.setAttribute(’cssText’, styleData);

        } else {

          //use the correct DOM Method

          h3.setAttribute(’style’, styleData);

        }

      }

    </script>

  </head>

  <body>

    <h3>h3.style.setAttribute('cssText', styleData);</h3>

  </body>

</html>

 

 

分享到：
| JS计算日期段的天数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C#控制IE浏览器

    1. **获取IE浏览器实例**：在C#中，我们可以通过枚举所有活动的窗口，识别出IE浏览器窗口，并获取其句柄。常用的API函数有`FindWindow`和`FindWindowEx`，它们可以找到具有特定类名或标题的窗口。一旦获取了句柄，...

    IE6用setAttribute添加事件无效

    总结来说，"IE6用setAttribute添加事件无效"的问题提醒我们在进行前端开发时，必须考虑到浏览器的兼容性问题，尤其是对老旧版本的IE浏览器。通过使用条件判断、库或适配器模式，我们可以编写出能够在各种浏览器环境...

    .NET WINFROM 操作IE浏览器DOM

    在本场景中，我们探讨的是如何使用C#编程语言在WinForm应用中操作IE浏览器的Document Object Model (DOM)。DOM是HTML和XML文档的结构化表示，它允许程序和脚本动态更新、添加或删除页面元素。 首先，我们需要引入对...

    IE浏览器去掉FLASH虚线框的两种方法

    标题 "IE浏览器去掉FLASH虚线框的两种方法" 涉及的是在使用Internet Explorer（IE）浏览含有Flash内容的网页时，如何消除Flash对象周围的虚线边框的问题。这通常是一个视觉上的优化，因为虚线边框可能会影响网页的...

    IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

    其中一个问题是`setAttribute`方法在这些老版本的IE浏览器中对某些属性的支持不足。`setAttribute`是DOM操作中常用的一个函数，用于动态地设置HTML元素的属性。然而，在IE6和IE7中，它并不支持像"class"、"for"、...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    在标准模式下，IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器，这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性，通常推荐使用`addEventListener`方法为元素添加事件监听器，但由于IE8...

    request.setAttribute 语句前总显示红色感叹号解决办法 HTTP Status 500 -

    在Java Web开发中，我们经常遇到各种运行时错误或编译错误，其中一种较为常见的问题是`request.setAttribute`方法调用时出现红色感叹号提示，并且伴随着HTTP 500错误。这种问题通常是由类型不匹配导致的，比如尝试将...

    IE6/7中使用setAttribute设置table的cellpadding和cellspacing的Bug

    本文将详细讨论一个特定的问题，即在IE6/7中使用JavaScript的setAttribute方法设置table的cellpadding和cellspacing属性时出现的bug。 首先，我们需要了解`cellpadding`和`cellspacing`属性。这两个属性是HTML中...

    开发跨浏览器JavaScript时要注意的问题

    在大多数情况下，可以使用`setAttribute`方法，但对于IE浏览器，则需要使用`className`属性： ```javascript var element = document.getElementById('myElement'); // 非IE浏览器 element.setAttribute('class', ...

    ie focus bug 解决方法

    然而，在某些情况下，尤其是当动态创建并添加元素到DOM后，直接调用`input.focus()`在IE浏览器中可能无法正常工作。这通常是因为浏览器的渲染机制与JavaScript执行顺序之间存在冲突，导致新创建的元素尚未完全渲染到...

    javascript中setAttribute()函数使用方法及兼容性

    通过创建一个映射对象`fixAttr`，我们可以将那些在老版本IE浏览器中存在兼容性问题的属性名称进行转换。通过这个映射对象，我们就可以将不符合标准的属性名称转换为正确的属性名称，从而保证`setAttribute()`在所有...

    setAttribute 与 class冲突解决

    但是，在使用 setAttribute 方法设置 class 属性时，存在一个冲突问题，那就是在不同的浏览器中，setAttribute 方法的行为不同。 问题的根源在于，IE 浏览器和 Firefox 浏览器对 class 属性的处理方式不同。在 Fire...

    IE DOM实现存在的部分问题及解决方法

    尤其是在处理DOM (Document Object Model) 操作时，IE浏览器与其他现代浏览器相比存在一些差异，这些差异可能导致网页在IE中的表现与预期不符。本文将针对IE中DOM实现存在的部分问题及其解决方法进行详细探讨。 ###...

    JavaScript的setAttribute兼容性问题解决方法

    在IE浏览器中，可以通过直接赋值的方式来设置`onclick`事件监听器，如`element.onclick = function() { /* 事件处理逻辑 */ };`。这种方法虽然可以兼容IE，但并不符合使用`setAttribute`的初衷。 此外，通过分析...

    IE中radio 或checkbox的checked属性初始状态下不能选中显示问题

    然而，不同浏览器之间对于HTML元素的解析和处理可能存在差异，其中IE浏览器就存在一个特定的问题，即在初始状态下无法通过`checked`属性正确设置`radio`或`checkbox`为选中状态。这个问题主要体现在`IE`的早期版本，...

    IE 不兼容的几个js问题及解决方法

    ### IE浏览器中的JavaScript不兼容性问题及解决方案 #### 一、Table操作问题 **问题描述：** 在使用JavaScript动态创建`&lt;table&gt;`元素并添加行（`&lt;tr&gt;`）或单元格（`&lt;td&gt;`）时，直接使用`document.createElement()`...

    JavaScript中setAttribute用法介绍

    然而，值得注意的是，对于CSS类的设置，Firefox浏览器接受`setAttribute("class", value)`，而Internet Explorer（IE）则需要使用`setAttribute("className", value)`。为了确保跨浏览器兼容性，通常需要同时使用这...

Magicbox
Global site tag (gtag.js) - Google Analytics