📄 day5_4.html
字号:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<style type="text/css">
<!--
a:link { color: blue; text-decoration: none}
a:visited { color: purple; text-decoration: none}
a:hover { color: purple; text-decoration: underline}
.unnamed1 { font-family: "宋体"; font-size: 9pt}
-->
</style>
<style>
<!--#menu {position: absolute;
left: 1px;top: 174px;width: 163px;height: 300px;}
-->
</style>
<style>
<!--#content {position: absolute;
left: 175px;top: 184px;width: 435px;height: 300px;}
-->
</style>
<title>网猴：动态HTML</title>
</head>
<body bgcolor="#FFFFFF">
<div id="content" style="left: 10px; top: 12px">
<table border="0" width="600" cellspacing="0">
<tr>
<td bgcolor="#ffff99" colspan="2"><font size="4" color="#000000"><strong>动态HTML教程
- 第五天</strong></font></td>
</tr>
<tr>
<td bgcolor="#FF6600" colspan="2"><em><font size="4"><a href="mailto:taylor@taylor.org">Taylor</a>
</font><font size="3">1998.3.9</font></em></td>
</tr>
</table>
<p><strong>第四页：一定要把样式加在标记中吗？</strong></p>
<p>如果你经常访问网猴，你可能知道我们鼓吹在线文档中结<br>
构、表现和行为的分离。你保持你的HTML结构，用CSS进行<br>
布局，然后用JavaScript做一些事情。尽可能地不要把这三者<br>
混在一起。问题是，当你从文档的head部分应用样式规则到<br>
对象时，在IE中，整个规划会分离到不同部分。</p>
<pre><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></pre>
<p>你得到一个空的对话框，是吗？</p>
<p>你的第一个反映可能是假定下载过程中断了。但是实际上是<br>
IE把这个整体分离。因为如果你查看文档，对象foo并没有<br>
样式在其中，虽然它有一个指向样式表的ID。所以foo的唯<br>
一属性是ID。你可以做一个实验，在foo标记中加入：</p>
<pre><div id="foo" bar="neat">This is the sample</div></pre>
<p>现在alert(foo.bar)会返回"neat"。你看出来在IE中发生什么了<br>
吗？标记中的任何属性都在DOM中作为对象的属性出现。但<br>
是如果它不在对象内，就在DOM中没有反映。这就是为什么<br>
把样式加到标记中。</p>
<p>为了修正这个问题，我们再一次使用JavaScript<br>
的<a href="http://www.hotwired.com/webmonkey/98/10/index2a_page5.html">object-as-reference</a>能力。但是不指向HTML对象，我们<br>
为按照ID为对象指定样式表规则。页面的结果和在你的脚本<br>
中的一致，但是不需要把样式放在标记行中。</p>
<pre><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></pre>
<p>结果是循环经过所有的页面的样式表。如果其中一个与你的<br>
对象的ID匹配，它就作为这个对象的别名。你可以象从前一<br>
样处理，但是用的HTML代码更整洁。<a href="day5_5.html">>></a></p>
<p><strong>动态HTML教程</strong><br>
<font color="#FF0000">第一页</font> <a href="day5_1.html">排错</a><br>
<font color="#FF0000">第二页</font> <a href="day5_2.html">放在底部和右面</a><br>
<font color="#FF0000">第三页</font> <a href="day5_3.html">Netscape的调整大小问题</a><br>
<font color="#FF0000">第四页</font> 一定要把样式加在标记中吗？<br>
<font color="#FF0000">第五页</font> <a href="day5_5.html">关于Event对象</a><br>
<font color="#FF0000">第六页</font> <a href="day5_6.html">课程结束</a></p>
<p><font size="3">[<a href="day1_1.html">第1天</a>][<a href="day2_1.html">第2天</a>][<a href="day3_1.html">第3天</a>][<a href="day4_1.html">第4天</a>][第5天]</font></p>
<font size="3">
<hr>
<br>
</font><font face="verdana, arial, geneva, sans-serif" size="2">本文由<a href="http://chd.126.com" target="_blank">《CHD的网络教室》</a>根据<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>相关文章改编，版权归<a href="http://www.webmonkey.com.cn" target="_blank">《网猴》</a>所有</font><font size="3">
</font></div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -