使用JavaScript控制CSS样式，也就是CSS特效这就是接下来就是我将要描述的内容。
1. 在CSS样式中，制作CSS样式的语法由三部分构成：选择器 ，属性， 和 值
例如:
body{
color:#000 ; font-size:12px;
}
CSS的属性非常多，组合成样式更是十分庞大，不过常用的样式并不多，通常是文本，背景，边框等属 性，
| 类别 | 属性 | 描述 |
| 文本属性 | font-size | 字体大小 |
| font-family | 字体的类型 | |
| font-style | 字体的样式 | |
| color | 设置或检索文本的颜色 | |
| text-align | 文本对齐 | |
| 背景属性 | background-color | 设置背景颜色 |
| background-imge | 设置背景图像 | |
| background-repeat | 设置一个指定的图像如何被重复 | |
| 边框属性 | border-width | 设置边框的宽度 |
| border-style | 设置边框的样式 | |
| boder-color | 设置边框的颜色 |
2.样式表
(1)内联样式
<input name=”user” type =”text” style= “width:100px; border:soild 1px #cccccc”/>
（2）内部样式
<style type= “text/css”>
input{
width:100px; border:soild 1px #cccccc
}
</style>
（3）外部样式
<link rel =”stylesheet” href=”style.css” type =”text/css”/>
3.JavaScript访问样式的常用方法
JavaScript中有两种方式可以动态的改变样式的属性一种是使用样式的style属性,另种是使用样式的className属性，下面主要介绍这两种属性的用法。
（1） style 属性
在HTML DOM中，style是一个对象,代表个单独的样式声明，可以应用样式的文档或元素访问style对象,使用style属性改变样式语法：
HTML元素.style.样式属性=“值”；
假如在页面中有一个id为titles的div，要改变div中的字体颜色为红色，字体大小13px,代码如下所示。
document.getElemnetById(“titles”).style.font-size =”25px”;
在浏览中运行该页面后发现页面出现错误
在JavaScript中使用CSS样式与HTML中使用CSS稍有不同，由于在JavaScript中”-“表示减号，因此如果样式属性名称为fontSize.在style对象中有许多样式属性，但是常用的样式属性主要是背景、文本、边框等
类别 属性 描述
background backgroundColor 设置元素的背景颜色
(背景) backgroundImage 设置 元素的背景图像
backgroundRepeat 设置是否及如何重复背景图像
text fontSize 设置元素的字体大小
（文本） textAlign 排列文本
textDecoration 设置文本的修饰
font 设置同一行字体的属性
color 设置文本的颜色
padding padding 设置元素的填充
(边距) paddingTop 设置元素的上，下，左，右
paddingBottom
paddingLeft
paddingRight
border border 设置四个边框的属性
（边框） borderTop 设置上下左右边框的属性
borderBottom
borderLeft
borderRight
在HTML DOM中，每个元素都有对应的事件，这些事件能够触发浏览器中的行为
常用事件
名称 描述
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
在 JavaScript中有一个关键字this 它通常指向正在执行的函数本身或指向函数所属的对象（正在执行的函数）。对于一个onmouseover事件，它指的是HTML 元素，如果在这件事件使用this,那么this表示当前的HTML元素,因此在行内改变style属性时可以使用this，例如onmouseover=”this.style.backgroundimage=’url(images/bg2.gif)'”;
（2）className属性
在HTML DOM中，className属性可设置或返回元素的class样式;语法如下：
HTML元素.className=”样式名称”;
4.JavaScript 访问样式的应用
思考问题：
（1）把广告图片放在一个div中，并且div总是显示在页面的上方。
（2）使用getElementById()方法获得取层对象，并且获取层在页面上的初始位置
（3）根据鼠标滚动事件，获取滚动条滚动的距离
（4）随着滚动条的移动改变层以及访问层，但是如何获取层在页面中的位置呢，还有如何获的鼠标的滚动事件呢
（1）获取样式属性值
在CSS中可以使用样式为每个样式为每个元素设置位置，同样。在HTML DOM 的style对象中也有对应的元素定位属性，在style对象中的Positioning 属性
属性 描述
top 设置元素的顶边缘距离父元素顶边缘之上或之下的距离
left 设置元素的左边缘距离父元素左边缘之左或之右的距离
right 设置元素的右边缘距离父元素右边缘之左或之右的距离
buttom 设置元素的底边缘距离父元素底边缘之上或之下的距离
zIndex 设置元素的堆叠次序
在元素定位的几个属性中，常用的top和left，通常用这两个属性设置中的位置，即距离页面顶端的位置（Y轴的位置）和距离页面左侧的位置（X轴的位置）。在页面的坐标体系
页面上所有元素都有top（Y轴上的锤直坐标）和left （X轴上的水平坐标）的偏移为了更好的理解页面中元素的坐标。我们来看下面的例子。在页面中有一个层，使用style属性获取层在页面中的位置。
<script type =”text/javascript”>
function place(){
var divobj = document.getElementById(“test”);
alert(“上：”+divobj.style.top+”n”+divobj.style.left);
}
</script>
<div id =”test” onclick = “place()”; style =”position:absolute; width:200px;left:50px;top:120px; height:100px;”/>测试</div>
从上面提示窗口中可以看到。style对象返回的坐标属性时带有单位（px）的；因此如果要获得做标的值；需要使用parseInt把坐标转行为数字，同样，当为某元素设置坐标时，也需要在最后的添加单位（px）. 在JavaScript中使用”HTML 元素.style 样式属性” 的属性值，只能获取内联式的属性值,无法获取内部样式表或外部样式中的属性值，那么如何获取样式表中的属性值呢？
微软为每一个元素提供一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性.currentStyle对象和style对象的使用方式一样
