php前端样式jscssWeb前端设计JavaScript动态设置CSS样式实例剖析

通过利用文档工具模型DOM，可以将HTML文件当做文档工具，并按照文档工具处理方法进行处理。
紧张处理形式包括设置HTML标记文本内容、设置元素属性值及对Style样式进行操作等。
本文紧张先容利用文档工具模型DOM所供应的Element、HTMLElement等实现对元素Style样式进行快速设置。

DOM标准

DOM（Document Object Model）文档工具模型是W3C提出的技能规范，该规范与浏览器、平台、措辞无关。
HTML DOM是指适用于HTML的文档工具模型。
因此在JavaScript中我们所认识的DOM应该可以理解为HTML DOM。
DOM标准干系工具关系描述如下图所示：

DOM标准观点与关系

php前端样式jscssWeb前端设计JavaScript动态设置CSS样式实例剖析 jQuery

在DOM标准工具描述中可以看出所有的工具都继续于Node工具，Node工具是DOM文档工具模型的核心。
在JavaScript文档工具模型中，Document工具、Element工具等都继续于Node工具，而HTMLDocument工具与HTMLElement工具等又分别继续于Document工具与Element工具。

Element工具供应了HTML页面中所有的元素方法与属性。
我们可以借助HTMLElement工具实现对HTML页面元素进行操作与属性值读写等。

HTMLElement设置CSS样式

HTMLElement工具继续自Element工具，因此具有其父类的基本属性与方法。
在Element工具紧张供应style属性与setAttribute()方法实现对元素样式属性及属性值进行设置。
两种方法描述如下：

1、style属性

style属性是HTMLElement继续自父类Element的基本属性之一，紧张用于对HTML样式属性进行设置或者样式属性值的读取。
在进行样式属性值设置过程中可以分为两种办法进行设置。
第一种为设置单个特定style样式，如设置background-color属性值，我们可直策应用如下方法进行设置：

HTMLElement.style.property=value;

第二种设置方法是同时对某个元素全部style样式进行重新设置，这种情形下我们利用style.cssText属性进行整体属性设置，设置语法描述如下：

HTMLElement.style.cssText="property1:value1;...propertyN:valueN";

2、setAttribute()方法设置CSS

setAttribute()方法也是Element工具的基本方法之一，紧张用于设置指定元素的指定属性值。
如该属性值存在则更新属性值。
在HTMLElement工具中我们可以直策应用setAttribute方法进行style属性的值的设置。
其基本语法描述如下：

HTMLElement.setAttribute(name,value);动态CSS样式设置实例

本例紧张设置实现在鼠标经由某一个DIV时，动态改变该DIV层的style样式属性，紧张改变属性包括背景颜色、字体大小及光标形状等。
设计原始DIV样式效果如下图：

原始CSS样式

该案例原始CSS样式实当代码描述如下图所示：

原始页面实当代码

按照实例哀求我们为div层添加鼠标over事宜，并编写事宜处理函数用于相应鼠标处理，详细处理须要实现style样式变革哀求。
对该div添加onmouseover事宜，相应函数名称为changeStyle()。
代码描述如下：

事宜处理函数