1. 论坛系统升级为Xenforo,欢迎大家测试!
    排除公告

通过 setAttribute 添加的行为在 IE 下不被执行

本帖由 不学无术2005-10-19 发布。版面名称:前端开发

  1. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    代码:

    HTML:
    <!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=gb2312">
    <title>setAttribute 测试</title>
    <script language="javascript" type="text/javascript">
    <!--
    function init() {
        var obj = document.getElementById("btn");
    	obj.setAttribute("onclick", "changeValue();");
    	obj.setAttribute("style", "background: #CC6600;");
    }
    
    function changeValue() {
        document.getElementById("txt").value = "New value!";
    }
    -->
    </script>
    </head>
    
    <body onload="init();">
    <input name="btn" type="button" id="btn" value="Click" />
    <input name="txt" type="text" id="txt" value="" />
    </body>
    </html>
    
    说明:

    页面中有两个表单元素:按钮 btn 和 文本框 txt 。页面加载的时候,调用 init() 给 btn 添加一个属性(行为) onclick 和改变 btn 的背景颜色,onclick 调用 changeValue() 来改变 txt 的值。

    在 FF 下,得到预期效果。IE 下面没有反应,也没有报错。

    难道 IE 不立即执行 setAttribute 增加的属性内容吗?
     
  2. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    在其它论坛求教,得到一个比较有价值的回复:

    感谢 蓝色理想 的 我佛山人。

    根据此思路,input 的 onclick 行为的确可以执行。但是换成 select 的 onchange ,在 IE 和 FF 下都不行了,IE 下有错误提示信息“尚未实现”。

    HTML:
    <!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=gb2312">
    <title>setAttribute 测试</title>
    <script language="javascript" type="text/javascript">
    <!--
    function init() {
        var obj = document.getElementById("btn");
    	//obj.setAttribute("onclick", "changeValue();");
    	//obj.setAttribute("style", "background: #CC6600;");
    	obj.onclick = changeValue;
    }
    
    function changeValue() {
        document.getElementById("txt").value = "New value!";
    }
    
    function selK() {
        var selK = document.getElementById("selK");
        selK.onchange = getValue(selK);
    }
    
    function getValue(o) {
        alert(o.options[o.selectedIndex].value);
    }
    -->
    </script>
    </head>
    
    <body onLoad="init(); selK();">
    <input name="btn" type="button" id="btn" value="Click" />
    <input name="txt" type="text" id="txt" value="" />
    <select name="selK" id="selK">
      <option value=""></option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
    </body>
    </html>
    继续求解!
     
    #2 不学无术, 2005-10-20
    最后编辑: 2005-10-20
  3. 不学无术

    不学无术 Ulysses 的元神

    注册:
    2005-08-31
    帖子:
    16,714
    赞:
    39
    刚才胡乱摸索,解决了问题。随后在 蓝色理想 也看到有人回复。

    修改后的部分代码为:

    代码:
    function selK() {
        var selK = document.getElementById("selK");
        selK.onchange = function() {
            getValue(selK);
        }
    }
    蓝色理想 的 ffxf 指点:

    感慨一下:想学东西,还是需要去那几个老牌的网站。