如果你经常访问网猴，你可能知道我们鼓吹在线文档中结构、表现和行为的分离。你保持你的HTML结构，用CSS进行布局，然后用JavaScript做一些事情。尽可能地不要把这三者混在一起。问题是，当你从文档的head部分应用样式规则到对象时，在IE中，整个规划会分离到不同部分。
<html>
<head>
<title>DOM example</title>
<style>
#foo {position: absolute; left: 10px; top: 10px}
</style>
<script>
function alertIt() {
alert(foo.style.left);
</script>
</head>
<bodyonload="alertIt()">
<divid="foo">This is the sample</div>
</body>
</html>你得到一个空的对话框，是吗？
你的第一个反映可能是假定下载过程中断了。但是实际上是IE把这个整体分离。因为如果你查看文档，对象foo并没有样式在其中，虽然它有一个指向样式表的ID。所以foo的唯一属性是ID。你可以做一个实验，在foo标记中加入：
<div id="foo" bar="neat">This is the sample</div>
现在alert(foo.bar)会返回"neat"。你看出来在IE中发生什么了吗？标记中的任何属性都在DOM中作为对象的属性出现。但是如果它不在对象内，就在DOM中没有反映。这就是为什么把样式加到标记中。
为了修正这个问题，我们再一次使用JavaScript的object-as-reference能力。但是不指向HTML对象，我们为按照ID为对象指定样式表规则。页面的结果和在你的脚本中的一致，但是不需要把样式放在标记行中。
<script>
function setup(myId){
if(document.layers){
myObj = document.layers[myID];
} elseif(document.all) {
for (ss=0 ; ss < document.styleSheets.length; ss++)
{
for (sr=0 ; sr < document.styleSheets(ss).rules.length;
sr++) {
if (document.styleSheets(ss).rules(sr).selectorText ==
'#' + myId) {
myObj = document.styleSheets(ss).rules(sr).style;
}
}
}
}
}
</script>结果是循环经过所有的页面的样式表。如果其中一个与你的对象的ID匹配，它就作为这个对象的别名。你可以象从前一样处理，但是用的HTML代码更整洁。
