<4>脚本化CSS

足至迹留

浏览: 496890 次
性别:
来自: OnePiece

最近访客更多访客>>

u012363178

gundammew

yeqingcheng

mqr1225

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端-javascript

四、脚本化CSS

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

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

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

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

重要的css属性

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

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

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

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

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

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