作为一个自称的网站管理员，我尽我所能跟上最新的网络技术。 我目前的努力是DHTML或动态HTML。 在听到了很多关于这项技术以及它将如何最终改变互联网的知识之后，我认为我必须离开沙发并开始学习它，然后才能失去称自己为“网站管理员”的权利。 如果您在DHTML方面像我一样笨拙，那么本教程适合您。 尽情享受，如果您有任何疑问，请随时给我发送电子邮件 。
这是一个很大的问题，我承认我很难找到一个直接的答案。 我记得在JavaScript新闻组上看到过一个帖子，试图用答复回答这个问题：
“ DHTML是HTML和JavaScript的组合”
我对自己说：“那不只是一个包含JavaScript的网页吗？” 至少可以说，我很困惑。 在搜索引擎上搜索了数百个搜索结果以找到对我的问题的那个难以捉摸的答案后，我仍然找不到它。 所以我想，到底该怎么做，我将首先学习DHTML，然后弄清楚它是什么！ 现在我已经是DHTML程序员了，我想我已经准备好为您提供DHTML这个词的不错的单行定义：
“ DHTML是第四代浏览器中几种内置浏览器功能的组合，使网页更具动态性”
您会看到，DHTML不是一种脚本语言（如JavaScript），而仅仅是一种浏览器功能或增强功能，它使您的浏览器具有动态能力。 您真正想学习的不是DHTML本身，而是使用DHTML所需的语法。 首先，您可能需要快速访问Dynamic Drive，以了解该语言的功能。
就像我说的那样，DHTML是功能的集合，这些功能共同使您的网页具有动态性。 我认为现在重要的是定义DHTML的创建者在说“动态”时的含义。 “动态”定义为浏览器在文档加载后改变网页外观和样式的能力。 我记得当我学习JavaScript时，我被告知您可以使用JavaScript的document.write（）方法来动态创建网页。 例如：
<script> document.write（“这是即时创建的文本！”）</ script>
“还不错”，我记得对自己说。 但是，如果我不仅想即时创建内容，还想按需创建内容怎么办？ 当时我还很幼稚，我试图通过将上面的代码嵌套在一个函数中，然后通过一个表单按钮来调用它来做到这一点：
<input type =“ button” onClick =“ writeconent（）” value =“ text”>
按下按钮绝对令人失望。 我的整个网页都被删除了，只剩下了函数产生的文本。
那是那时。 现在，随着DHTML的引入，我可以随时随地更改网页内容，而无需浏览器删除其他所有内容。 这就是DHTML的全部意义。 浏览器即使在文档加载后也可以更改外观和样式。
既然我让大家都兴奋了，我认为在上面放一个阻尼器是很公平的。 DHTML的技术目前正处于开发阶段，NS 4和IE 4在实现这一出色技术方面有很大的不同。 目前尚无法编写一个DHTML代码，并希望它能在两种浏览器中正常运行。 此外，两种浏览器在DHTML的开发中处于不同的阶段。 据我所知以及所听到的信息，IE 4中的DHTML比NS 4更加强大和通用。 我不想帮助传播任何宣传，所以我将保留它。
根据您的观点，这可能是好事，也可能是坏事。 NS 4中的DHTML非常简单，基本上可以归结为一个单词层。 我当时非常惊讶，但是它的真实-NS 4完全依赖于称为<layer>标签的新标签来增强其DHTML的魔力。 这个新标签是动态的，因为它可以放置在网页上的任何位置（与其他内容无关），移动，按需更新其内容等。
基本语法
<layer>标记的基本语法再简单不过了（好像HTML中的任何标记都很复杂！）：
<layer>图层中的文字</ layer>
<layer>标签是一个内容标签，这意味着您可以在其中添加内容（例如<table>）。 继续，尝试将上面的代码插入到页面中……您会注意到该图层内的文本浮于其他文本之上，并且与它们重叠。 想象一下一张纸层，它位于页面其余部分的顶部，并且不会在文档流中占用空间。
图层属性
一层本身再无聊，更不用说了。 幸运的是，它还有更多。 图层支持属性，这些属性使您可以使用x，y坐标系对其进行定位，为其提供背景，对其进行裁剪（仅使该图层的某些区域可见），将其从视图中隐藏等等。 我在下面列出了最重要的图层属性：
图层属性id图层的名称，用于在脚本中进行标识。左侧图层相对于x坐标的位置top图层相对于y坐标的位置width图层的宽度（以px或px为单位） ％height图层的高度，以px或％bgColor图层的背景颜色background的背景图像src图层内部包含的外部html文档
任意混合和匹配不同的属性。
注意，我没有指定left和top属性。 如果不这样做，则将图层定位在定义它的位置。
脚本层
了解图层最重要的事情之一-如何编写图层。 毕竟，使层活跃起来的脚本。 要访问层，您需要使用以下语法：
document.layername
访问该层只是第一步。 访问图层后，就可以继续操作该图层的属性之一以产生动态效果。
单击此处以获取示例，其中图层的背景颜色在红色和蓝色之间互换。
所有图层的属性都是可读/可写的，因此请务必对它们进行试验！
当我开始学习IE 4的DHTML实现时，我意识到它的功能远不止于NS对应功能。 IE中的DHTML不依赖任何标签，而是依赖于您惯用的常用HTML标签（例如<div>和<table>）的新对象和属性。 它功能强大得多，但同时又复杂得多。
IE 4的样式对象
IE 4中的HTML元素现在都支持样式对象，该对象本质上是用于操纵该元素的外观和“感觉”的“动态”对象。 像<layer>标记一样，也可以为元素分配“ id”属性，然后在编写脚本时将其用于标识它。 例如：
<div id =“ adiv”> </ div>
在您的脚本中，访问“ adiv”的样式对象所需的语法如下所示：
个人风格
样式对象包含许多属性，通过操纵这些属性，可以动态更改元素的外观。 我现在将显示其中一些属性：
样式对象的重要属性
- backgroundColor元素的背景色
- backgroundImage元素的背景图像
- color元素的颜色
- position元素的位置类型。 接受的值是“绝对”和“相对”
- pixelWidth元素的宽度
- pixelHeight元素的高度
- pixelLeft元素相对于x坐标的位置
- pixelTop元素相对于y坐标的位置
上面的属性仅代表支持的所有属性的子集，但是最常用的属性。 操纵任何样式属性的基本语法是相同的，我将在稍后显示。 通过访问这些属性，我们可以更改大多数HTML元素的外观和样式（与Netscape中的<layer>标记相反）！
请注意我如何更改文本的颜色：
sometext.style.color ='红色'
我首先使用元素的id进行访问，然后通过样式对象，最后通过样式的color属性，可以轻松地按需更改文本的颜色！
所有样式属性都是读/写的，并且以类似的方式访问：元素id->样式对象->属性名称。
单击此处，获得另一个示例，该示例在鼠标悬停在图像上方时将其展开，并在鼠标移出时将其恢复为原始大小。
是的，我知道它并不是世界上最实际的例子，但是它确实很好地说明了DHTML。 图像可根据需要更改尺寸，而无需重新加载文档。 那是JavaScript永远无法做到的。
如果您还不被NS 4和IE 4中DHTML在语法和功能上的所有差异所吓倒，您就可以学习如何使页面上的内容动态化或按需更改！
NS 4中的动态内容
在NS 4中更改内容涉及-您猜到了-层标记。 NS浏览器将所有层都视为与页面其余部分分开的单独实体，并带有自己的文档对象（该对象又包含文档支持的其他对象）。 理解这一点非常重要，因为图层包含另一个文档对象这一事实使在NS中创建动态内容成为可能。 我将首先构造一个基本层，然后说明如何更改其中的内容：
<layer id =“ alayer” width = 100％height = 30> </ layer>
准备访问以上层的文档对象吗？ 这是必需的语法：
document.alayer.document
因此，了解了这些信息后，我可以编写一个脚本，每3秒更改一次该层的内容。
文本是动态生成和删除的，无需重新加载文档！
IE 4中的动态内容
在IE 4中，动态内容是通过存在于<span>和<div>标记上的特殊属性innerHTML实现的。 只需将此属性设置为新的HTML值，该span或div中的内容就会立即更新为新值！ 我将通过修改上面的示例为IE 4用户创建动态内容来说明它是如何完成的：
结果相同，只是到达目的地的方式不同！
如果您喜欢处理动画，那么您将很高兴地知道，使用DHTML，整个网页现在就是您的绘图板！ 您可以创建在屏幕上自由飞行的内容。 在Netscape中，这是通过操纵<layer>标记的left和top属性来完成的。 在IE 4中，可以通过更改样式对象的pixelLeft和pixelTop属性来实现同一目的。
NS 4中的移动元素
在第2课中，图层支持left和top属性，该属性控制其与文档左上角的偏移量。 好吧，通过使用简单的数学运算和几行脚本，我们可以动态更新这些属性，从而使图层移动！ 下面的示例更改图层的left属性，使其在按下按钮时水平移动。
瞧，我要做的就是连续添加到“空间”的left属性中以移动它，并在我希望图层返回到其初始位置时将属性设置回其原始值。
IE 4中的移动元素
顺便说一句，NS和IE同意DHTML的一种实现的那一天是我可以停止编写所有内容的两个版本的一天（只是让自己有些沮丧）。 在IE 4中移动元素基本上包括首先将该元素包装在定位的span或div内，然后更改span或div的pixelLeft和pixelTop属性。 听起来很复杂，但实际上非常简单。
我首先要做的是将名为<spaceship>的外部<div>设置为相对位置，这对于使元素可移动是必要的（您也可以将其设置为“ absolute”值）。 然后，通过操纵其样式对象的pixelWidth属性，元素将移动。
在“真正的”跨浏览器DHTML可用之前（换句话说，当NS和IE发挥作用之前），跨浏览器DHTML基本上意味着使用您在JavaScript的那几年中选择的各种脚本技术来嗅探用户正在使用的浏览器。 ，然后执行用于该浏览器的代码。 在本课程中，我将首先说明一种创建“跨浏览器”层的方法，然后向您展示一种我最近学到的脚本技术，该技术可让您轻松探查浏览器的浏览器类型。
创建一个“跨浏览器”层
好的，所以我们有可以理解<layer>标签的NS和可以理解<span>和<div>的IE。 如果我们想创建一个简单的DHTML效果（例如运动图像），通常需要使用两个标签-NS 4的图层标签，IE 4的div或span标签。 好吧，我最近了解到，实际上存在一种创建仅使用一个标签的“跨浏览器”层的方法，尽管它在NS端存在一些问题。 显然，NS 4将绝对定位的div视为与图层相同。 因此，下面是一个跨浏览器层的示例，没有任何进一步的延迟：
<div id =“ crosslayer” style =“ position：absolute”> </ div>
NS 4对上述div的处理与对图层的处理完全相同。 像其他任何层一样，要访问它，我们首先要遍历document对象，然后是该层的id：
document.crosslayer
在IE 4中，我们只需使用div的ID：
跨层
我发现在NS中，以这种方式指定一个层虽然在跨浏览器兼容性方面很方便，但是却有一个主要缺点。 这样的层并不总是表现出正常层应有的行为，有时可能会导致浏览器崩溃。 只是准备期待意外！
浏览器嗅探对象检测
直到最近，每当我希望确定冲浪者的浏览器类型时，都将像大多数JavaScript程序员一样使用navigator对象。 下面说明了使用该对象嗅探NS 4和IE 4：
var ns4 =（navigator.appName ==“ Netscape” && navigator.appVersion> = 4）var ns4 =（navigator.appName ==“ Microsoft Internet Explorer” && navigator.appVersion> = 4）
就个人而言，我讨厌使用导航器对象-使用起来如此复杂（只看上面的混乱！）。 好吧，我有个好消息要带给您。 实际上，嗅探各种浏览器的方法要快得多，这就是所谓的对象检测。
这个想法基于JavaScript的工作方式。 如果浏览器不支持特定对象，则当您引用JavaScript时，JavaScript将返回null。 知道这一事实，我们可以在if语句中使用对象引用（代替导航器对象）来确定用户的浏览器。
让我们做一个例子。 我们知道NS 3+和IE 4+支持document.images对象。 如果我们想嗅探这些浏览器，我们可以这样做：
如果（document.images）alert（“您正在使用NS 3+或IE 4+”）
将以上内容翻译成英文，内容为：“如果浏览器支持images对象（只有NS 3+和IE 4+支持），请发出消息。
将对象检测视为确定用户浏览器类型的间接方法。 对象检测不是直接确定用户浏览器的名称和版本（通过navigator对象），而是一种更通用，更省力的浏览器嗅探技术。
那么，我们如何使用对象检测来嗅探NS 4和IE 4？ 好吧，只有NS 4支持document.layers对象，只有IE 4支持document.all。 我们可以使用此知识轻松确定用户是使用NS 4，IE 4还是同时使用这两者：
如果（document.layers）alert（“您正在使用NS 4+”）
如果（document.all）alert（“您正在使用IE 4+”）
如果（document.layers || document.all）alert（“您正在使用NS 4或IE 4+”）
现在，您不必再返回凌乱的导航器对象来进行浏览器嗅探了！
DHTML资源
显然，本教程仅作为DHTML的介绍。 这里有一些很棒的资源，可以帮助您继续进行DHTML：
扫一扫
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
