测试所用的浏览器:ie7,Google Chrome 69.0.3497.100 (正式版本) (64 位)
对用js创建的dom对象添加自定义属性
ie7中可以直接用.属性
的方式添加,但是在谷歌浏览器中会出现添加不上的bug。
var ddm = document.createElement("TR");
ddm.asd = "aaa";
alert(ddm.outerHTML);
ie7输出<tr asd="aaa"></tr>
谷歌输出<tr></tr>
值得注意的是,在谷歌中直接alert(ddm.asd)
是可以弹出aaa
的,但是它并不会被识别为dom元素的自定义属性。在高版本浏览器中,只有那些内置的属性可以用这种语法添加,比如ddm.id="aaa"
这种是可以的。
兼容的方法很简单,可以用setAttribute方法来添加自定义属性。
var ddm = document.createElement("TR");
//ddm.asd = "aaa";
ddm.setAttribute("asd", "aaa");
console.log(ddm.outerHTML);
对部分css样式(带有长度的)的添加
ie7中,所添加的长度可以忽略单位,浏览器会自动为其加上px。
var ddm = document.createElement("TR");
ddm.style.width = 345;
alert(ddm.outerHTML);
但是在谷歌中,这会导致样式添加失败。必须指定单位。
var ddm = document.createElement("TR");
ddm.style.width = "345px";
alert(ddm.outerHTML);
childNodes
ie7中,childNodes经常会想你做想的那样工作,但是在谷歌中,“空白”文本会扰乱你的结果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /></script>
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<table>
<thead></thead>
<tbody id="tbby">
<tr></tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
alert(document.getElementById("tbby").childNodes.length);
</script>
ie7中会返回1,但是高版本浏览器中可能会返回3 ,因为tr与tbody之间的空白也会被识别为节点。如果非要用childNodes的话,可以讲html改成这样
<table>
<thead></thead>
<tbody id="tbby"><tr></tr></tbody>
</table>
非常不建议这样修改,先不说可读性的问题,对于一些复杂的页面,尤其是通过复杂规则与代码动态生成的html,这根本做不到!建议直接用jQuery来改吧。列出几种常见的例子。
对于这样的html
<table>
<thead></thead>
<tbody id="tbby">
<tr></tr>
</tbody>
</table>
var temp = document.getElementById("tbby").childNodes;
改为 var temp = jQuery("#tbby").find("tr").get();
var temp = document.getElementById("tbby").childNodes.length;
改为 var temp = jQuery("#tbby").find("tr").length;