DHTML 大全分析

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/helanye/archive/2009/07/11/4340884.aspx

方法

add 向 areas, controlRange 或 options 集合中添加一个元素。
add 创建一个新的 namespace 对象并将其添加到集合中。
addBehavior 给元素附加一个行为。
AddChannel 显示一个对话框，答应用户输入指定的频道，或当已安装时更改频道的 URL。
AddDesktopComponent 向 Microsoft® 活动桌面® 中添加 Web 站点或图像。
AddFavorite 出现一个对话框提示用户将指定的 URL 添加到收藏夹内。
addImport 为指定样式表向 imports 集合中添加样式表。
addPageRule 为样式表创建新的 page 对象。
addReadRequest 向读取需求队列中添加项。
addRule 为样式表创建新规则。
alert 显示包含由应用程序自定义消息的对话框。
appendChild 给对象追加一个子元素。
appendData550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 向对象末尾添加新的字符串。
applyElement 使得元素成为其它元素的子元素或父元素。
assign 装入新的 HTML 文档。
attachEvent 将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
AutoCompleteSaveForm 将指定表单保存到自动完成数据存储中。
AutoScan 通过完成模板传递指定查询试图连接到 Web 服务器。
back 从历史列表中装入前一个 URL。
blur 使元素失去焦点并触发 onblur 事件。
ChooseColorDlg550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 打开系统颜色选择对话框。
clear 清除选中区的内容。
clear 目前尚未支持。
clearAttributes 从对象中删除全部标签属性和值。
clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。
clearInterval 使用 setInterval 方法取消先前开始的间隔事件。
clearRequest 清除读取需求队列中的全部需求，以便预备一个新的配置信息需求。
clearTimeout 取消先前用 setTimeout 方法设置的超时事件。
click 触发 onclick 事件来模拟单击。
cloneNode 从文档层次中复制对对象的引用。
close 关闭当前浏览器窗口或 HTML 应用程序(HTA)。
close 关闭输出流并强制将数据发送到显示。
collapse 将插入点移动到当前范围的开始或结尾。
compareEndPoints 比较 TextRange 对象的结束点和其它范围的结束点。
componentFromPoint 通过特定事件返回对象在指定坐标下的位置。
confirm 显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。
contains 检查对象中是否包含给定元素。
createAttribute550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 以指定名称创建 attribute 对象。
createCaption 在表格中创建空的 caption 元素。
createComment550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 以指定数据创建 comment 对象。
createControlRange 创建一个非文本元素的 controlRange 集合。
createDocumentFragment 创建一个新文档。
createElement 为指定标签创建一个元素的实例。
createEventObject 生成当使用 fireEvent 方法时用于传递事件相关信息的 event 对象。
createPopup 创建弹出窗口。
createRange 从当前文本选中区中创建 TextRange 对象，或从控件选中区中创建 controlRange 集合。
createRangeCollection 从当前选中区中创建一个 TextRange 对象。
createStyleSheet 为文档创建样式表。
createTextNode 从指定值中创建文本字符串。
createTextRange 为元素创建一个 TextRange 对象。
createTFoot 在表格中创建空的 tFoot 元素。
createTHead 在表格中创建空的 tHead 元素。
deleteCaption 从表格中删除 caption 元素及其内容。
deleteCell 从表格行及 cells 集合中删除指定单元格(td)。
deleteData550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 从对象中删除指定范围的字符。
deleteRow 从表格及 rows 集合中删除指定行(tr)。
deleteTFoot 从表格中删除 tFoot 元素及其内容。
deleteTHead 从表格中删除 tHead 元素及其内容。
detachEvent 从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
doImport 动态导入元素行为。
doReadRequest 执行所有位于读取需求队列中的需求。
doScroll 模拟对滚动条组件的单击。
dragDrop 初始化拖曳事件。
duplicate 返回 TextRange 的副本。
elementFromPoint 返回指定 x 和 y 坐标的元素。
empty 取消当前选中区，将选中区类型设置为 none，将其 item 属性设置为 null。
execCommand 在当前文档、当前选中区或给定范围上执行命令。
execScript 以给定语言执行指定的脚本。
expand 扩展范围以便完全包含指定单位的范围。
findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。
fireEvent 触发对象的指定事件。
firstPage 显示绑定表格的数据集的第一页记录。
focus 使得元素得到焦点并执行由 onfocus 事件指定的代码。
forward 从历史列表中装入下一个 URL。
getAdjacentText 返回邻接文本字符串。
getAttribute 获取指定标签属性的值。
getAttribute 从 userProfile 对象中返回命名属性的值。
getAttributeNode550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 获取由 attribute.name 属性引用的 attribute 对象。
getBookmark 获取可用于使 moveToBookmark 返回相同范围的书签(白底字符串)。
getBoundingClientRect 获取指定 TextRectangle 对象集合绑定的对象。
getClientRects 获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。
getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName 根据 NAME 标签属性的值获取对象的集合。
getElementsByTagName 获取基于指定元素名称的对象集合。
getExpression 获取给定属性的表达式。
getNamedItem 使用 attributes 集合获取由 name 属性指定的 attribute。
go 从历史列表中装入 URL。
hasChildNodes 返回表明对象是否有子对象的值。
hasFeature 返回表明对象是否实现了指定的文档对象模型(DOM)标准的值。
hasFocus 获取表明对象目前是否拥有焦点的值。
hide 关闭弹出窗口。
ImportExportFavorites 处理导入和导出 Microsoft® Internet Explorer® 收藏夹。
inRange 返回一个范围是否被另一个范围包含。
insertAdjacentElement 在指定位置插入元素。
insertAdjacentHTML 在指定位置的元素中插入给定的 HTML 文本。
insertAdjacentText 在指定位置插入给定的文本。
insertBefore 在文档层次中插入元素作为父对象的子结点。
insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
insertData550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 在对象的指定偏移量处插入新字符串。
insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。
isEqual 返回指定范围是否与当前范围相等。
IsSubscribed 获取表明客户是否订阅了给定频道的值。
item 从 all 集合或各种其它集合中获取对象。
item 从 filters 集合或各种其它集合中获取对象。
item 从 attributes 集合中获取元素的标签属性。
item 从 behaviorUrns 集合中获取对象。
item 从 namespaces 集合中获取 namespace 对象。
item 从 rules 集合中获取对象。
item 从 pages 集合中获取对象。
item 从 controlRange 集合中获取对象。
item 从 bookmarks 集合中获取对象。
item 从 childNodes 或 children 集合中获取对象。
item550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 获取指定块格式化标签名称的字符串。
javaEnabled 返回 Java 是否已启用。
lastPage 显示绑定表格的数据集的最后一页记录。
mergeAttributes 复制所有读/写标签属性到指定元素。
move 折叠给定文本范围并将空范围移动给定单位数。
moveBy 将窗口的位置移动指定 x 和 y 偏移值。
moveEnd 更改范围的结束位置。
moveRow 将表格行移动到新位置。
moveStart 更改范围的开始位置。
moveTo 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveToBookmark 移动到书签。
moveToElementText 移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。
moveToPoint 将文本范围的开始和结束位置移动到给定点。
namedItem550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 从指定集合中获取对象或集合。
namedRecordset 获取与来自于数据源对象(DSO)的命名数据成员相对应的记录集对象。
navigate 在当前窗口中装入指定 URL。
NavigateAndFind 前往指定的 URL 并选中指定文本。
nextPage 显示绑定表格的数据集的下一页记录。
normalize550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 合并邻接 TextNode 对象以便生成一个常规的文档对象模型。
open 打开新窗口并装入给定 URL 的文档。
open 此方法以两种方式工作。该方法打开一个文档用于收集 write 和 writeln 方法的输出。在这种情况下，只使用前两个参数 url 和 name。若指定了附加参数，此方法将打开一个窗口，这与 window 对象的 window.open 方法相同。
parentElement 获取给定文本范围的父元素。
pasteHTML 将 HTML 文本粘贴入给定文本范围，替换范围内任何先前的文本和 HTML 元素。
previousPage 显示绑定表格的数据集的上一页记录。
print 打印与窗口关联的文档。
prompt 显示一个提示对话框，其中带有一条消息和一个输入框。
queryCommandEnabled 返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的 Boolean 值。
queryCommandIndeterm 返回表明指定命令是否处于模糊状态的 Boolean 值。
queryCommandState 返回表明命令当前状态的 Boolean 值。
queryCommandSupported 返回表明当前命令是否在当前区域上支持的 Boolean 值。
queryCommandValue 返回文档、范围或当前选中区对于给定命令的当前值。
recalc 重新计算当前文档中的全部动态属性。
refresh 刷新表格中的内容。当调用 removeRule 这样的方法后这可能是必需的，因为此时页面可能不会自动更新。
releaseCapture 释放当前文档中对象的鼠标捕捉。
reload 重新装入当前页面。
remove 从集合中删除一个元素。
removeAttribute 删除对象的给定标签属性。
removeAttributeNode550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 从对象中删除删除 attribute 对象。
removeBehavior 分离元素的行为。
removeChild 从元素上删除子结点。
removeExpression 从指定属性中删除表达式。
removeNamedItem 从使用 attributes 集合的元素中删除带有指定 name 属性的 attribute 对象。
removeNode 从文档层次中删除对象。
removeRule 删除 styleSheet 对象中的已有样式规则，并调整对应 rules 集合的索引。
replace 装入指定 URL 的另外文档来替换当前文档。
replaceAdjacentText 替换元素的邻接文本。
replaceChild 用新的子元素替换已有的子元素。
replaceData550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 将对象中指定范围的字符替换为新字符串。
replaceNode 用其它元素替换对象。
reset 模拟单击对所调用表单重置按钮的单击。
resizeBy 更改窗口的当前位置缩放指定的 x 和 y 偏移量。
resizeTo 将窗口的大小更改为指定的宽度和高度值。
scroll 将窗口滚动到自左上角起指定的 x 和 y 偏移量。
scrollBy 将窗口滚动 x 和 y 偏移量。
scrollIntoView 将对象滚动到可见范围内，将其排列到窗口顶部或底部。
scrollTo 将窗口滚动到指定的 x 和 y 偏移量。
select 突出显示表单元素的输入区域。
select 将当前选中区置为当前对象。
setActive 设置对象为当前对象而不将对象置为焦点。
setAttribute 设置指定标签属性的值。
setAttributeNode550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 设置 attribute 对象为对象的一部分。
setCapture 设置属于当前文档的对象的鼠标捕捉。
setData 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。
setEndPoint 根据其它范围的结束点设置某范围的结束点。
setExpression 设置指定对象的表达式。
setInterval 每经过指定毫秒值后计算一个表达式。
setNamedItem 向使用 attributes 集合的元素中添加一个 attribute 对象。
setTimeout 经过指定毫秒值后计算一个表达式。
show 在屏幕上显示弹出窗口。
ShowBrowserUI 打开指定的浏览器对话框。
showHelp 显示帮助文件。此方法可用于 Microsoft HTML 帮助。
showModalDialog 创建一个显示指定 HTML 文档的模式对话框。
showModelessDialog 创建一个显示指定 HTML 文档的非模式对话框。
splitText 在指定索引处分割文本结点。
start 开始滚动字幕。
stop 停止字幕的滚动。
submit 提交表单。
substringData550)this.style.width=550; if(this.height>550)this.style.width=(this.width*550)/this.height;" /> 从对象中析取一定范围的字符。
swapNode 交换文档层次中两个对象的位置。
tags 拥有指定 HTML 标签名称的对象集合。
taintEnabled 返回是否答应数据污点。
urns 获取附加了指定行为的全部对象的集合。
write 在指定窗口的文档中写入一个或多个 HTML 表达式。
writeln 在指定窗口的文档中写入一个或多个 HTML 表达式，后面追加一个换行符。

DHTML 中重要的属性方法

其实DOM教给我们的就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录……

根节点：

DOM把层次中的每一个对象都称之为节点（NODE），以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点（ROOT）

子节点：

一般意义上的节点，根节点以下最大子节点就是主文档区<body>了，要访问到body标签，在脚本中应该写：
document.body
body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点），大家知道HTML说到底只是文本而矣，不论怎么样的网页必然由这两个节点组成，也只能由这两个节点组成

节点之间的关系：

节点之间的关系也是DOM中最重要的一个关节，如何正确地引用到节点对象，一定要清楚节点树各个节点的相互描述方式，在DHTML里，Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。

节点的绝对引用：
返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement

节点的相对引用：(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合（包含文本节点及标签节点）
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling

节点的各种操作：(设当前的节点为node)

新增标签节点句柄：
document.createElement(sNode) //参数为要新添的节点标签名，例：newnode=document.createElement("div");

1、添加节点：
追加子节点：
node.appendChild(oNode) //oNode为生新增的节点句柄,例：node.appendChild(newnode)
应用标签节点
node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值：outside / inside，加在当前节点外面还是里面
插入节点
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()

2、修改节点：

删除节点
node.remove()
node.removeChild()
node.removeNode()

替换节点
node.replaceChild()
node.replaceNode()
node.swapNode()

2、复制节点：
返回复制复制节点引用
node.cloneNode(bAll)//bAll为布尔值，true / false 是否克隆该节点所有子节点

3、节点信息
是否包含某节点
node.contains()
是否有子节点
node.hasChildNodes()

DHTML对象

!DOCTYPE 指定了 HTML 文档遵循的文档类型定义(DTD)。
a 标明超链接的起始或目的位置。
acronym 标明缩写词。
address 特定信息，如地址、签名、作者、此文档的原创者。
applet 在页面上放置可执行内容。
area 定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。
attribute 以对象的形式代表了 HTML 元素的标签属性或属性。
b 指定文本应以粗体渲染。
base 指定一个显示 URL 用于解析对于外部源的链接和引用，如图像和样式表。
baseFont 设置渲染文本时作为缺省字体的基础字体值。
bdo 允许作者为选定文本片断禁用双向法则。
bgSound 允许页面带有背景声音或创建音轨。
big 指定内含文本要以比当前字体稍大的字体显示。
blockQuote 设置文本中的一段引语。
body 指定文档主体的开始和结束。
br 插入一个换行符。
button 指定其中所含的 HTML 要被渲染为一个按钮。
caption 指定表格的简要描述。
center 将后面的文本和图像居中显示。
cite 用斜体显示标明引言。
clientInformation 包含关于 Web 浏览器的信息。
clipboardData 提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。
code 指定代码范例。
col 指定基于列的表格缺省属性。
colGroup 指定表格中一列或一组列的缺省属性。
comment 标明不可见的注释。
currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
custom 代表了一个用户自定义元素。
dataTransfer 提供了对于预定义的剪贴板格式的访问，以便在拖曳操作中使用。
dd 在定义列表中表明定义。定义通常在定义列表中缩进。
defaults 编程设定元素行为的缺省属性。
del 表明文本已经从文档中删除。
dfn 表明术语的定义实例。
对话框帮助协助程序 提供对颜色对话框及块格式化和字体集合的访问。
dir 引起目录列表。
div 指定渲染 HTML 的容器。
dl 引起定义列表。
document 代表给定浏览器窗口中的 HTML 文档。
dt 在定义列表中表明定义术语。
em 强调文本，通常以斜体渲染。
embed 允许嵌入任何文档。
event 代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。
external 允许访问由 Microsoft® Internet Explorer 浏览器组件宿主应用程序提供的附加对象模型。
fieldSet 在字段集包含的文本和其它元素外面绘制一个方框。
font 指定用于渲染所包含文本的新字体、大小和颜色。
form 指定所包含控件在表单中起作用。
frame 在 FRAMESET 元素内指定单个框架。
frameSet 指定一个框架集，用于组织多个框架和嵌套框架集。
head 提供了关于文档的无序信息集合。
history 包含了用户已浏览的 URL 的信息。
hn 以标题样式渲染文本。
hr 绘制水平线。
html 表明文档包含 HTML 元素。
HTML 注释 避免任何内含文本或 HTML 源代码被处理并在浏览器窗口中显示。
i 指定文本应以斜体渲染，若可用的话。
iframe 创建内嵌浮动框架。
img 在文档中嵌入图像或视频剪辑。
implementation 包含了关于对象支持的模块信息。
IMPORT 从元素行为中导入标签定义。
input 创建各种表单输入控件。
input type=button 创建按钮控件。
input type=checkbox 创建复选框控件。
input type=file 创建文件上载控件，该控件带有一个文本框和一个浏览按钮。
input type=hidden 传输关于客户/服务器交互的状态信息。
input type=image 创建一个图像控件，该控件单击后将导致表单立即被提交。
input type=password 创建与 INPUT type=text 控件类似的单行文本输入控件，不过其中并不显示用户输入的内容。
input type=radio 创建单选钮控件。
input type=reset 创建一个按钮，该按钮单击后将重置表单控件为其缺省值。
input type=submit 创建一个按钮，该按钮单击后将提交表单。
input type=text 创建一个单行的文本输入控件。
ins 指定被插入到文档中的文本。
isIndex 使浏览器显示一个对话框，提示用户输入单行文本。
kbd 以固定宽度字体渲染文本。
label 为页面上的其它元素指定标签。
legend 在 fieldSet 对象绘制的方框内插入一个标题。
li 引起列表中的一个项目。
link 允许当前文档和外部文档之间建立连接。
listing 以固定字体渲染文本。
location 包含关于当前 URL 的信息。
map 包含客户端图像映射的坐标数据。
marquee 创建一个滚动的文本字幕。
menu 创建一个项目的无序列表。
meta 向服务器和客户端传达关于文档的隐藏信息。
namespace 向文档中动态导入一个元素行为。
navigator 包含关于 Web 浏览器的信息。
nextID 创建编辑软件可以读取的唯一标识符。
noBR 不换行渲染文本。
noFrames 包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML。
noScript 指定要在不支持脚本的浏览器显示的 HTML。
object 向 HTML 页面中插入对象。
ol 绘制文本的编号列表。
optGroup 允许作者对 select 元素中的选项进行逻辑分组。
option 引起 SELECT 元素中的一个选项。
p 引起一段。
page 代表 styleSheet 中的一条 @page 规则。
param 设置 APPLET、EMBED 或 OBJECT 元素的属性初始值。
plainText 以固定宽度字体渲染文本，不处理标签。
popup 一种特殊的顶层窗口，主要用于出现在应用程序主窗口之外的对话框、消息框和其它临时窗口。
pre 以固定宽度字体渲染文本。
q 分离文本中的引语。
rt 指明 RUBY 元素的注音文本。
ruby 指明要放置在文本串之上或内嵌的注解或发音指南。
rule 代表了层叠样式表(CSS)中由选择符和一个或多个声明组成的的样式。
runtimeStyle 代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
s 以删除线字体渲染文本。
samp 指定代码范例。
screen 包含关于客户屏幕和渲染能力的信息。
script 为脚本指定由脚本引擎解释的脚本。
select 引起列表框或下拉框。
selection 代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。
small 指定内含文本要以比当前字体稍小的字体显示。
span 指定内嵌文本容器。
strike 以删除线字体渲染文本。
strong 以粗体渲染文本。
style 代表了给定元素所有可能的内嵌样式的当前设置。
style 指定页面的样式表。
styleSheet 代表了文档中单一的样式表。
sub 指定内含文本要以下标的形式显示，通常比当前字体稍小。
sup 指定内含文本要以上标的形式显示，通常比当前字体稍小。
table 指定所含内容要组织成行列的表格。
tBody 指明行作为表格主体。
td 指定表格中的单元格。
textArea 指定多行文本输入控件。
TextNode 将文本字符串代表为文档层次中的结点。
TextRange 代表 HTML 元素中的文本。
TextRectangle 指定包含元素或 TextRange 对象中一行文本的矩形。
tFoot 指明行作为表尾。
th 指定标题列。标题列将在单元格中居中并以粗体显示。
tHead 指明行作为表头。
title 包含文档的标题。
tr 指定表格中的一行。
tt 以固定宽度字体渲染文本。
u 带下划线渲染文本。
ul 绘制文本的项目符号列表。
userProfile 提供了允许脚本对用户配置信息请求读取访问并执行读取操作的方法。
var 定义编程变量。通常以斜体渲染。
wbr 向一块 NOBR 文本中插入软换行。
window 代表浏览器中一个打开的窗口。
xml 在 HTML 页面上定义一个 XML 数据岛。
xmp 以固定宽度字体渲染作为示例的字体。

DHTML方法基础 - 对DIV的一些简单控制

<html>
<head>
<style type="text/css">
#d1 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #555;
}
#d2 {
position: absolute;
width: 300px;
height: 300px;
visibility: hidden;
color: #fff;
background: #777;
}
#d3 {
position: absolute;
width: 150px;
height: 150px;
visibility: hidden;
color: #fff;
background: #999;
}
</style>
<script>
var d1, d2, d3, w, h;
window.onload = function() {
d1 = document.getElementById('d1');
d2 = document.getElementById('d2');
d3 = document.getElementById('d3');
back();
w = window.innerWidth;
h = window.innerHeight;
resizeCheck();
}
function resizeCheck() {
if (w != window.innerWidth || h != window.innerHeight) {
location.replace(location.href);
return;
}
setTimeout("resizeCheck()", 1000);
}
function back() {
divMoveTo(d1,200,50);
divMoveTo(d2,250,75);
divMoveTo(d3,75,75);
divZIndex(d1,1);
divZIndex(d2,2);
divZIndex(d3,3);
divBgColor(d1,'#555');
divBgColor(d2,'#777');
divBgColor(d3,'#999');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
divShow(d1);
divShow(d2);
divShow(d3);
}
function color() {
divBgColor(d1,'#f02d2d');
divBgColor(d2,'#f040d1');
divBgColor(d3,'#55afe0');
divTxtColor(d1,'#fff');
divTxtColor(d2,'#fff');
divTxtColor(d3,'#fff');
}
function divMoveTo(d, x, y) {
d.style.pixelLeft = x;
d.style.pixelTop = y;
}
function divMoveBy(d, dx, dy) {
d.style.pixelLeft += dx;
d.style.pixelTop += dy;
}
function divShow(d) {
d.style.visibility = 'visible';
}
function divHide(d) {
d.style.visibility = 'hidden';
}
function divSizeTo(d, w, h) {
d.style.pixelWidth = w;
d.style.pixelHeight = h;
}
function divSizeBy(d, dw, dh) {
d.style.pixelWidth += dw;
d.style.pixelHeight += dh;
}
function divZIndex(d, z) {
d.style.zIndex = z;
}
function divBgColor(d, c) {
d.style.background = c;
}
function divTxtColor(d, c) {
d.style.color = c;
}
</script>
</head>
<body id="bodyId">
<form name="form1">
<h3>DHTML方法基础 - 对DIV的一些简单控制 BY 51js zdzhuo</h3>
<p>
<input type="button" value="移动d2" οnclick="divMoveBy(d2,10,10)"><br>
<input type="button" value="移动d3到d2(0,0)" οnclick="divMoveTo(d3,0,0)"><br>
<input type="button" value="移动d3到d2(75,75)" οnclick="divMoveTo(d3,75,75)"><br>
</p>
<p>
<input type="button" value="放大d1" οnclick="divSizeBy(d1,15,15)"><br>
<input type="button" value="缩小d1" οnclick="divSizeBy(d1,-15,-15)"><br>
</p>
<p>
<input type="button" value="隐藏d2" οnclick="divHide(d2)"><br>
<input type="button" value="显示d2" οnclick="divShow(d2)"><br>
</p>
<p>
<input type="button" value="优先显示d1" οnclick="divZIndex(d1,2);divZIndex(d2,1)"><br>
<input type="button" value="优先显示d2" οnclick="divZIndex(d1,1);divZIndex(d2,2)"><br>
</p>
<p>
<input type="button" value="填充颜色" οnclick="color()"><br>
</p>
<p>
<input type="button" value="返回默认状态" οnclick="back()"><br>
</p>
</form>
<div id="d1">
<b>d1</b>
</div>
<div id="d2">
<b>d2</b><br><br>
d2包含d3
<div id="d3">
<b>d3</b><br><br>
d3是d2的子层
</div>
</div>
</body>
</html>

此外，我们还可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定对象能直接调用的函数）在先前文本或Html内容的前边或后边插入新的文

本或Html内容，使用这些方法需要参数，这些参数有：BeforeBegin、
AfterBegin、 BeforeEnd和AfterEnd，它们是用来标明文本或Html插入的地方。具体用法如下例：

使用insertAdjacentHTML插入文本

<html>
<head>
<title>DHtml举例14</title>
<style>
<!--
body {font-family:"宋体";color="blue";font-size:"9pt"}
-->
</style>
<script
language="JavaScript">
function Insert()
{
document.all.New.insertAdjacentHTML("AfterBegin","<font color=red>新插入的内容<font>");
//第一个参数是用来指明位置，第二个参数是要插入的Html内容。
}
</script>
</head>
<body>
<p><br></p>
<p id="New" οnclick="Insert()">点击此行蓝色文字将插入文本</p>
</body>
</html>
您可以试一下另外三个参数BeforeBegin、BeforeEnd和AfterEnd。insertAdjacentText方法地用法也是类似的。

Dhtml实例教程（十一）

　 今天我们开始使用图像了。图像在网页制作重视非常重要的一部分，如果没有图像，网页将变得很单调乏味。我们这里并不是单纯地用<img src="……"

alt="……">Html标志在网页中嵌入图像，而是要使图像具有动态性。例15是一个比较简单的例子，关键是改变<img src="……" alt="……">Html标志中的src属

性。

例15 动态改变图像

<html>
<head>
<title>DHtml举例15</title>
</head>
<body>
<p><br>
<font style="font-size:9pt" color="blue">在下边图形上移动鼠标可以改变图象</font>
</p>
<img style="cursor:hand" οnmοuseοver="this.src='boom2.gif'" οnmοuseοut="this.src='boom1.gif'" src="boom1.gif">
</body>
</html>

（注意:此例中的图像文件保存在与该HTML文档相同的目录下,因为HTML可以使用相对目录,所以src属性后边直接跟图像的文件名）

下边我们结合上一个教程中使用过的innerHTML属性和insertAdjacentHTML方法来动态改变页面。例16是一道选择题，当您选择正确时会显示“笑脸”图像，而当

您选择错误时将会显示“愁眉苦脸”图像。

例16 一道动态的选择题
<html>
<head>
<title>DHtml举例16</title>
<style>
<!--
body {font-size:9pt}
ul {cursor:hand;color:blue;font-size:9pt}
.none {color:blue;text-decoration:none}
.underline {color:red;text-decoration:underline}
-->
</style>
<script language="JavaScript">

function ImgAppear(imgfile){
//此函数用于显示图像
if(imgfile=="good.gif")
{
Img.innerHTML=""; //清空Img对象中的所有Html
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答对了!"); //在对象Img中插入图像的Html标志
}
else
{
Img.innerHTML="";
Img.insertAdjacentHTML("AfterBegin","<img src="+imgfile+"><br>答错了!");}
}//function

function Start(){
//此函数用于“重新开始”的操作
Img.innerHTML="";
}//function

</script>
</head>
<body>
<p><br>
<font color="gray">98-99赛季欧洲冠军杯得主是哪支球队（请用鼠标点击选择项）：</font> </p>
<table width="100%">
<tr>
<td width="233"><ul class="none">
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">多 特 蒙 德 队 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">尤 文 图 斯 队 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('good.gif')">曼 彻 斯 特 联 队 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">皇 家 马 德 里 队 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="ImgAppear('bad.gif')">巴 塞 罗 那 队 </li>
<li οnmοuseοver="this.className='underline'" οnmοuseοut="this.className='none'"
οnclick="Start()"><font color="gray">重 新 开 始 </font></li>
</ul>
</td>
<td width="520" id="Img"></td>
</tr>
</table>
</body>
</html>

Dhtml实例教程（十二）

对于Html的<div></div>标志对，您可能使用的甚少，当它在动态Html的设计中却非常有用，我们可以用它的样式属性中的position属性来定义文本显示位置的方

式，包括相对位置（position:"relative"）和绝对位置（position:"absolute"），然后在用样式属性中的top、left、heigh、width属性我们先来确定文本显示

的位置。很多书上把对<div></div>标志对的控制叫做对“层”的控制。下面是一个简单的举例。

例17 重叠两行文本而得到的阴影效果

<html>
<head>
<title>DHtml举例17</title>
<style>
<!--
body {font-size:9pt}
.redtext {color:red;position:absolute;top:100;left:100;}
.graytext {color:gray;position:absolute;top:101;left:102;}
-->
</style>
</head>
<body>
<p><br>
</p>
<div class="graytext"><b>您最喜欢制作主页吗？</b></div>
<div class="redtext"><b>您最喜欢制作主页吗？</b></div>
</body>
</html>

和以前的教程中介绍的其它样式单的属性相似，我们同样可以用JavaScript来对<div></div>标志对中的文本进行动态控制。下面的例子将使文本在屏幕上移动。

例18 文本在屏幕中移动
<html>
<head>
<title>DHtml举例18</title>
<style><!--
body {font-size:9pt}
.move {cursor:hand;position:absolute;visibility:hidden;height:60;width:60;color:yellow;border:blue 1px solid;background-color:rgb(147,0,0);}
-->
</style>
<script language="JavaScript">
var all=document.all;
var flag=1;//变量flag用来控制“执行或终止执行函数Move()”
var act;
var xhd=0;//变量xhd为信号灯，用于控制“层”的移动方向

function MoveStamp(){
all.stamp.style.top=document.body.offsetTop;//对象stamp的top属性等于对象body的offsetTop值
all.stamp.style.left=document.body.offsetLeft;
all.stamp.style.visibility = "visible";
if(flag==1)
{
act = window.setInterval("Move()",50);//执行函数Move()
flag=0;
}
else
{
window.clearInterval(act);//终止执行函数Move()
all.stamp.style.visibility = "hidden";//隐藏对象stamp
flag=1;
}//if
}//function

function Move(){
if(all.stamp.style.pixelLeft>=document.body.offsetLeft+350) xhd=1;
if(all.stamp.style.pixelLeft<=document.body.offsetLeft) xhd=0;
if(xhd==0)
{
//对象stamp往右下方移动
all.stamp.style.pixelLeft+=5;
all.stamp.style.pixelTop+=5;
}
else
{
//对象stamp往左上方移动
all.stamp.style.pixelLeft-=5;
all.stamp.style.pixelTop-=5;
}//if
}//function

</script>
</head>
<body οnclick="MoveStamp()">
<p align="center">用鼠标单击一下会有效果出现，再单击一下则效果消失，如此反复……</p>
<div id="stamp" class="move"><p valign="middle" align="center"><br><b>我要在天空中飞翔<b></p></div>
</body>
</html>

语句act = window.setInterval("Move()",50)调用了JavaScript本身具有的函数，它用于在间隔特定时间后（本例中为50毫秒）执行特定的函数（本例中为

Move()函数），然后将返回值赋给一个变量（本例中为变量act），要想终止此特定函数的执行，用语句window.clearInterval(act)即可。此例是一个很不错的

例子，希望您能仔细阅读，以便以后编写动态网页时能够得心应手。

Dhtml实例教程（十三）

哈哈，今天又有新的东西介绍给您，您知道过滤器（filter）吗？如果您经常使用图形软件（如PhotoShop等），那您肯定有所了解。过滤器可以用来对可见对象

进行过滤以达到各种动态的效果。CSS拥有扩充的过滤器，我们可以将它与动态HTML相结合，制造出各种动态效果。有些书上将它称为“过渡”，它是IE4.0动态

HTML技术的一部分。对于所有可视化的对象，我们都可以使用过渡的方法将它从一种状态转换为另一种状态，并且这种转换过程在浏览器重视可以清楚看到的。
HTML4.0有两种类型的过渡过滤器：Blend和Reveal。
Blend过渡可以在指定的时间间隔内实现图像的简单淡出和淡入，基本句型为：
style="filter:blendTrans(Duration=过渡的时间)"//过渡时间的单位为"秒"
而Reveal过渡可以通过使用不同的技术选择地显示或隐藏图像，它的效果有很多，基本句型是：
style="filter:revealTrans(Duration=过渡的时间,Transition=过渡的类型)"//过渡时间的单位为"秒",Transition的取值范围是0～23
下面就是一个用Blend过滤图像的例子。

例19 图像自动交替地淡出

<html>
<head>
<title>DHtml举例19</title>
<style>
<!--
body {font-size:9pt}
-->
</style>
<script language="JavaScript">
var flag=0;
//全局变量flag用来控制绘出的图象；flag=0时绘出图象lkjx2.jpg，而flag=1时则绘出lkjx1.jpg
var act;

function Change(){
act=window.setInterval("AutoChange()",9500);//每隔9.5秒钟执行函数AutoChange()
}//function

function AutoChange(){
if(flag==0)
{
flag=1;
Img.filters.blendTrans.Apply(); //用Apply方法停止原图象的绘出
Img.src = "lkjx2.jpg"; //将Img设置成另一幅图象jklx2.jpg
Img.filters.blendTrans.Play(); //用Play方法调用过滤器的淡出效果
}
else
{
flag=0;
Img.filters.blendTrans.Apply();
Img.src = "lkjx1.jpg";
Img.filters.blendTrans.Play();
}//if
}//function

</script>
</head>
<body οnlοad="Change()">
<img id="Img" src="lkjx1.jpg" alt="会变换的图象！" style="filter:blendTrans(duration=7)">
</body>
</html>

act=window.setInterval("AutoChange()",9500)设置的时间（9.5秒）一定要比style="filter:blendTrans(duration=7)"设置的时间（7秒）长，否则将产生脚

本语言出错。

既然Reveal有24种之多的过渡效果，我们就不妨试试看。

例20 Reveal过渡过滤器的24中动态效果

<html>
<head>
<title>DHtml举例19</title>
<style>
<!--
img.i1 {
width:100;
height:230;
}
-->
</style>
<script language="JavaScript">
var shape=0;//变量shape用来存储transition的数值，即动态效果的类型
var flag=0;
//全局变量flag用来控制绘出的图象；flag=0时绘出图象lkjx2.jpg，而flag=1时则绘出lkjx1.jpg
var act;

function ChangeImg(){
act=window.setInterval("ChangeShape()",7500);//每隔7.5秒钟执行函数ChangeShape()
}//function

function ChangeShape(){
if(shape==24) shape=0; //因为transition的值在0～23之间，故不能让它超过23
if(flag==0)
{
Insert.innerHTML="<img id='Shp' src='image/sunset.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是

transition="+shape+"时的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出
Shp.src='image/spac001.jpg'
Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果
flag=1;
}
else
{
Insert.innerHTML="<img id='Shp' src='lkjx2.jpg' class=i1 style='filter:revealTrans(duration=6,transition="+shape+")'><br>这是

transition="+shape+"时的效果";
Shp.filters.item(0).Apply(); //用Apply方法停止原图象的绘出
Shp.src='lkjx1.jpg'
Shp.filters.item(0).Play(); //用Play方法调用过滤器的动态效果
flag=0;
}//if
shape++; //shape自身加1
}//function

</script>
</head>
<body οnlοad="ChangeImg()">
<p id="Insert"><img id="Shp" src="lkjx1.jpg" alt="会变换的图象！" style="filter:revealTrans(duration=6,transition=00)"></p>
</body>
</html>

Dhtml实例教程（十四）

　 除了前边我所讲的那些动态效果外，动态HTML还可以显示时间，或通过时间来进行动态的设计交互式网页。具体步骤如下：
通过调用函数Date()和关键字new创建一个时间对象，如语句：today=new Date();将创建时间对象today；
利用这个时间对象的getYear、getMouth、getDate、getDay、getHours、getMinutes和getSeconds等方法得到时间；
利用得到的时间进行判断和相应的操作；
在HTML文档中输出结果。
下面是一个显示当日的年份、月份和星期的简单例子。

例21 显示当天的年月日和星期

<html>
<head>
<title>DHtml举例21</title>
<style><!--
body {font-size:9pt;color:blue}
</style>
<script language="JavaScript">
var today;
var day;
var date;

today=new Date(); //此语句通过调用函数Date()和关键字new将today变成了一个时间对象

//通过时间对象today的getDay方法确定星期几，并将相应的字符串赋给变量day
if(today.getDay()==0) day="星期日 ";
if(today.getDay()==1) day="星期一 ";
if(today.getDay()==2) day="星期二 ";
if(today.getDay()==3) day="星期三 ";
if(today.getDay()==4) day="星期四 ";
if(today.getDay()==5) day="星期五 ";
if(today.getDay()==6) day="星期六 ";

//变量date用于存储年月日
date="今天是19"+(today.getYear())+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日 ";

//在HTML文档中输出"年月日"和"星期"
document.write(date);
document.write(day);
</script>
</head>
<body>
</body>
</html>

我们还可以通过获得时间判断是上午、下午或是晚上，然后相应的在网页中输出问候语：“早上好”、“下午好”或“晚上好”。

例22 给您一个问候

<html>
<head>
<title>DHtml举例22</title>
<style><!--
body {font-size:9pt;color:blue}
</style>
<script language="JavaScript">
var today;
var hello;

today=new Date(); //此语句通过调用函数Date()和关键字new将today变成了一个时间对象

//通过对象today的getHours方法确定时间是商务、下午还是晚上，并将相应的问候语字符串赋给变量hello
if(today.getHours()<=12) hello="早上好! ";
if(12<today.getHours()<=18) hello="下午好! ";
if(today.getHours()>18) hello="晚上好! ";

//在HTML文档中输出当前的具体时间
document.write(hello);
document.write("现在是"+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds()+"。");
</script>
</head>
<body>
</body>
</html>

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/helanye/archive/2009/07/11/4340884.aspx