动态HTML教程 - 第五天
Taylor 1998.3.9
　

第四页：一定要把样式加在标记中吗？

如果你经常访问网猴，你可能知道我们鼓吹在线文档中结
构、表现和行为的分离。你保持你的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>

<body onload="alertIt()">

<div id="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]; 
   } else if(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代码更整洁。>>

动态HTML教程
第一页 排错
第二页 放在底部和右面
第三页 Netscape的调整大小问题
第四页 一定要把样式加在标记中吗？
第五页 关于Event对象
第六页 课程结束

[第1天][第2天][第3天][第4天][第5天]

返回