使用JavaScript动态控制CSS样式.pptxVIP

IE 4.0版本浏览器开始为每个元素在逻辑层面扩展了style对象，使用它能够动态管理每个元素的CSS样式。后来W3C在发布DOM 2.0版本时，也加入了动态控制CSS样式的API模块，并为每个元素绑定了style对象。在二级DOM（即DOM 2.0）中，W3C以模块化定义并封装了CSS结构模型，并发布了专为CSS技术服务的API组件。在前面章节中我们曾经讲解了CSS样式的基本规则，即CSS样式都是由名/值属性对的列表组成，属性对之间使用分号隔开，属性名与属性值之间使用冒号隔开。而DOM中的样式属性与CSS的属性声明在用法略有不同，本章将详细讲解如何在JavaScript中动态控制CSS样式。样吧视频教室（/）《网页制作与网站开发从入门到精通》配套视频17 使用JavaScript动态控制CSS样式DOM定义了一个CSS2Properties对象，该对象表示一组CSS属性及其值。它为符合CSS规范的所有属性都定义了对应的脚本属性（即style属性）。在脚本中，每个元素节点的style 属性都是一个可读可写的CSS2Properties对象成员。样吧视频教室（/）《网页制作与网站开发从入门到精通》配套视频17.1 脚本化CSS17.1.1 认识样式的脚本属性样式的脚本属性与CSS属性存在对应关系，详细说明可以参阅表17.1所示。font-size fontSizemargin-top marginTopfloatcssFloat样吧视频教室（/）《网页制作与网站开发从入门到精通》配套视频17.1 脚本化CSS17.1.2CSS在DHTML中的作用DHTML不是一种标记语言，它仅是一个应用概念，即动态HTML（Dynamic HTML，简称DHTML），确切的讲DHTML就是HTML+CSS+JavaScript综合应用的一种称呼，通俗说就是设计动态网页效果，实现在客户端人机交互的功能。DHTML最先由微软提出，并得到很多浏览器厂商、Web服务商和设计师的支持。当然，它不是Web应用标准，没有得到W3C组织认可。DHTML是建立在以下技术基础之上。HTML（XHTML），设计页面结构和内容，这些结构和内容是被动态操纵的对象。CSS：设计页面对象的呈现效果，它也是被动态操纵的内容，从而实现各种复杂动态交互效果。JavaScript：客户端脚本，通过脚本语言的逻辑来控制HTML结构和CSS样式的变化和显示。样吧视频教室（/）《网页制作与网站开发从入门到精通》配套视频17.1 脚本化CSS17.1.2CSS在DHTML中的作用针对DHTML，CSS可以在如下方面发挥巨大作用：对象显隐操作：这是DHTML最常用的网页动态形式，主要使用CSS的display和visibility属性来实现。对象缩放操作：可以使用CSS的height和width属性来实现。对象定位操作：可以使用CSS的position、left、top、right和button等属性来实现。对象移位操作：这种动画效果，主要使用CSS的position、left、top、right和button等属性来实现。区域控制：clip、overflow和visibility等属性来设计。其他动态效果：如动态改变字体样式、文本版式、网页布局版式、图像、列表和表格样式等。样吧视频教室（/）《网页制作与网站开发从入门到精通》配套视频17.1 脚本化CSS当使用DOM获取页面中某个元素的引用指针之后，我们就可以使用style属性获取该元素的CSS2Properties对象。实际上CSS2Properties就是一个特殊的数据集合，它包含了所有CSS脚本属性。设置这些属性与设置CSS样式的效果是一样的。不过使用style属性只能设置元素的内联样式，且不能使用CSS2Properties对象获取样式表中的信息。样吧视频教室（/）《网页制作与网站开发从入门到精通》配套视频17.2 脚本中的行内样式17.2.1 脚本中样式属性名使用规范CSS2Properties对象所定义的的属性名与CSS属性名是不同的。如果对应CSS属性名包含一个或多个连字符，那么CSS2Properties就会删除这些连字符，并根据驼峰命名法来重命令属性。例如，对于border-right-color属性来说，在脚本中应该使用borderRightColor。17-10.html在CSS中当我们给属性设置值时，不需要考虑值的数据类型。但是在JavaScript中，CSS2Properties对象认定所有CSS属性值都是字符串，因此脚本中所有属性值都必须加上引号，以表示为字符串数据类型。17-11.html样吧视频教室（/）《网页制作与网站开发从入门到精通》配套视频17.2 脚本中的行内样式17.2.1 脚