第四页:一定要把样式加在标记中吗?
如果你经常访问网猴,你可能知道我们鼓吹在线文档中结
构、表现和行为的分离。你保持你的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对象
第六页 课程结束
Copyright © 1994-99 Wired Digital Inc. All rights reserved.