JavaScript操作CSS属性详解-优快云博客

[b]四、脚本化CSS[/b]

层叠样式表（Cascadeing Style Sheet, CSS）是一种指定HTML文档视觉表现的标准。本节不详细介绍CSS的全部内容，只是提到一些基础，基本的脚本化。

[b]CSS概览[/b]
Html文档的视觉显示包含很多变量：字体，颜色，间距等。CSS标准列举了这些变量，我们称为样式属性。CSS定义了这些属性以指定字体，颜色，外边距，边框，背景图片，文本对齐样式，元素尺寸和元素位置，这些属性都有各自可以取的值。

通常将单独的html元素与css样式分开，并把css样式定义在一个样式表（stylesheet）中。样式表通过选择器将一组样式属性和使用选择器描述的一组html元素关联起来。
用<style>标签把一个css样式表放在<head>标签里，它就和html文档关联在一起了。还可以通过<link>关联保存成文件的外部的样式表。类似<script>元素，<style>元素内容页不会当做html来解析。

关于css的定义方法有几种，每种定义方法的优先级，以及css各属性的使用这里不详细给出，可以查看专门的资料。这里主要给出用javascript怎么操作css属性。

[b]重要的css属性[/b]

[img]http://dl2.iteye.com/upload/attachment/0091/4588/116ebf7c-bb03-3f03-876e-8d3abb6e2629.bmp[/img]

比如css定位属性position的使用：

[img]http://dl2.iteye.com/upload/attachment/0091/4590/60390d90-4e0d-31dc-9616-759d12df0c95.bmp[/img]
[img]http://dl2.iteye.com/upload/attachment/0091/4592/15f51222-6e49-3342-8a35-e6d45500815c.bmp[/img]

[b]脚本化内联样式[/b]
脚本化css最直截了当的方法就是更改单独的文档元素的style属性。Style属性的值不是字符串而是一个CSSStyleDecalration对象。如：

Element.style.fontSize = “24pt”;
Element.style.fontWeight = “bold”;
Element.style.color = “blue”;

[b][i]注意[/i]：在css中使用连字符的属性在javascript需要转成驼峰表示法，如font-size变为fontSize.[/b]

Html元素的style属性时它的内联样式，它覆盖在样式表中的任何样式说明。[b]同样内联样式style也可以通过前面介绍过的属性操作方式来设置，比如setAttribute(“style”, “color：red”)等。[/b]

其他还有关于css实现动画，获取计算出来的最终样式，操作css样式类等不记录了，关于这部分还是使用类似jquery框架更方便，但是理解最基本最原生的操作方式还是非常有必要的。

<4>脚本化CSS