返回
第10章 高级dom技术

第10章 高级dom技术

ID：19296533

大小：59.50 KB

页数：23页

时间：2018-09-30

第10章 高级dom技术_第1页
第10章 高级dom技术_第2页
第10章 高级dom技术_第3页
第10章 高级dom技术_第4页
第10章 高级dom技术_第5页
资源描述：

《第10章 高级dom技术》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第10章高级DOM技术第10章高级DOM技术虽然基本的DOM相当简单，但是可以应用不同方式来处理文档底层的DOM树。首先，可利用现行浏览器中非标准的属性和方法，以及鲜为人知且有待进一步利用的DOM标准接口。本章中讨论的接口中，有些是DOM定义的，其他的不是，不过它们都能提高处理DOM文档和节点的能力。10.1样式编程当CSS（层叠样式表）于1996年被提出后，它颠覆了开发人员格式化HTML页面的方式。抛弃使用诸如和之类的标签，页面开始使用CSS来定义字体以及其他内容的外观。很自然，支持

2、CSS的下一步就是让JavaScript能够访问样式表。IE4.0为每一个页面上的元素都引入了一个style对象来管理元素的CSS样式。DOM最后也采用这个方式，并将其作为访问元素的样式信息的标准手段。如今，style对象包含与每个CSS样式对应的特性，虽然格式不同。单个单词的CSS样式，以相同名字的特性来表示（例如，color样式通过style.color来表示）；但是style对象中，两个单词的样式的表示方式是通过将第一个单词加上首字母大写的第二个单词，且单词间没有横线（例如，background-co

3、lor样式对应style.backgroundColor）来表示的。下面的表格列出一些常用的CSS特性及它们对应的JavaScript中style对象的表示：CSS样式特性JavaScript样式属性background-colorstyle.backgroundColorcolorstyle.colorfontstyle.fontfont-familystyle.fontFamilyfont-weightstyle.fontWeight要用JavaScript来更改样式的值，只需将CSS的字符串分配给它们

4、的样式对象的特性就行。例如，下面的代码将

的CSSborder特性更改为"1pxsolidblack"：varoDiv=document.getElementById("div1");oDiv.style.border="1pxsolidblack";也可以使用style对象来获取任何内联样式（直接通过HTML的style特性来分配的样式）的值。例如，下面的页面当点击
按钮时，显示它们的背景色：StyleExample

5、ype="text/javascript">functionsayStyle(){varoDiv=document.getElementById("div1");alert(oDiv.style.backgroundColor);}


6、or"onclick="sayStyle()"/>同样的技巧也可应用于用户将鼠标移动到页面上指定元素时的翻转效果。尽管CSSLevel2提供hover伪类来为所有元素实现翻转效果，但并不是所有浏览器都支持所有元素。为客服这个支持上的缺陷，就要用到style对象。StyleExample

7、50px"onmouseover="this.style.backgroundColor='blue'"onmouseout="this.style.backgroundColor='red'">

当把鼠标移动到红色
上时，它就会变成蓝色；当把鼠标移走，它又变回红色。注意这个事件处理函数用this关键字来指代
本身，并通过它获取对style对象的访问。style对象还包含cssText特性，这个特性包含了所有描述元素样式的CSS字符串：<

8、head>StyleExample

当点击例子中的
时，就会出现文本"background-color:red;

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。