简介

设置页面样式就是设置页面的CSS(层叠样式表)其作用是通过设置对象CSS的相关属性达到美化页面的效果;通过设置页面的布局、字体、颜色、背景等使其拥有统一的页面风格;所有的主流浏览器都支持CSS,其属性绝大部分都可通用,少部分可能会略有差别;本章节主要讲解通过js动态设置属性及其值以达到改变页面的显示效果

示例实操

1 设置div的居中,高度,宽度,边框样式,前景色,背景色;设置其字体,大小,颜色

在style中设置

通过js代码设置样式属性

注意:在js中属性名使用的是"驼峰命名法";如果属性名是两个及以上的单词组成,首个单词的首字母小写其它单词首字母大写,其它的类似属性在js中的写法以此类推

2 浮动 设置div的浮动float属性: 1)none(默认) 2) left(左浮动) 3) right(右浮动)

在js中设置浮动属性不能直接使用float,因为这个单词在js中属于保留字(为js以后扩展所用)在高版本谷歌,火狐,苹果,IE9及以上中使用cssFloat(标准),IE8及以下中使用 styleFloat ;

设置浮动

浮动属性还可作用于<a>,<p>,<span>,<li>等标签上

3 定位 设置div的position属性: 1) static 默认值

2) absolute 绝对定位,控制某个元素移动时,必须先设置此属性

3) fixed 固定定位或者黏性定位,不受网页中滚动条的影响

4) relative 相对定位,根据某个元素设置其位置

2)3)4)的属性值一般与left，right，top，bottom属性并用

设置div的定位

此章节主要目的是了解掌握style与js之间转换的书写规则,不是专门讲解CSS样式的,所以其它的有关知识以后用到再一并讲解