Question

我需要对以下简单的HTML页面进行哪些更改才能让Firefox在IE中读取和设置自定义属性？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Original Value</title>
</head>

<body>

<div MyAttribute="Original Value"  id="Label1">Hello World</div>

<form method="post">
    <table style="width: 100%">
        <tr>
            <td>
            <input name="Button1" onclick="button1_click();" type="button" value="button" /></td>
        </tr>
    </table>
    <script type="text/javascript">
function button1_click(){

alert("Enter");
//alert("Label1.MyAttribute " + Label1.MyAttribute);
alert(Label1.getAttribute("MyAttribute"));

Label1.MyAttribute = "Updated";
alert("Label1.MyAttribute " + Label1.MyAttribute);

}
</script>
</form>

</body>

</html>

Answer 1

您已发现getAttribute，但需要使用document.getElemenById检索该元素，并且需要使用setAttribute来修改该属性。

function button1_click()
{
  alert("Enter");
  var label1 = document.getElementById("Label1"); 
  alert(label1.getAttribute("MyAttribute"));
  label1.setAttribute("MyAttribute", "Updated");
  alert("Label1.MyAttribute " + label1.getAttribute("MyAttribute"));
}

Answer 2

您需要将节点实例分配给Label1变量：

var Label1 = document.getElementById("Label1");

此外，在使用DOM时，不要将值设置为属性，最好使用setAttribute函数

执行此操作

Answer 3

尝试：

function button1_click(){
    alert("Enter");

    var label = document.getElementById('Label1');
    alert(label.getAttribute("MyAttribute"));
    label.MyAttribute = "Updated";
    alert("Label1.MyAttribute " + label.MyAttribute);

}

当您在JavaScript中使用未定义的全局变量时，IE似乎会搜索元素ID（可能还有名称）。 Firefox没有。

你可能会认为这两种行为都是正确的，但我不得不在这一行中支持Firefox。我不喜欢浏览器假设我的代码。只会产生一些小错误，比如原始代码中的一次，很难发现。

Answer 4

您的加价无效。我以前见过人们做过这类事，但从来没有试过去理解它。你怎么能强迫任何应用程序理解它，除非你使用不同的mime类型？那么其他浏览器呢？

自定义HTML属性，：Firefox与IE

4 个答案: