javascript和CSS之间的关系学习笔记

来源：互联网发布：soa是什么知乎编辑：程序博客网时间：2024/06/08 16:16

javascript和CSS

1、层叠样式表CSS：指定网页的外观和感觉，将色彩、字体和布局应用到页面的元素中。

2、选择器（selector）：根据元素的类型（<p><h1> <a> 等）可将CSS样式属性应用于一组文档元素，或者通过指定元素的class和ID属性值将CSS样式属性应用与单个元素。

selector{property:value}

h1{font-family:arial;}//设置字体的属性值为arial

3、使用CSS文档的几种方法：

1）直接将样式应用到HTML元素本身；

2）在文档的<head>部分包含一个<style>元素；

3）连接到外部文件的CSS，跟链接到外部文件的javascript的方式类似。（最优选择），提高了对CSS文档的重用性，大大简化了网站的不断维护。

4、javascript和CSS之间的关系

1）通过ID设置元素的样式

简单而有效的方法：是通过getElementById()和style对象来设置元素。可以使用javascript的样式名来单独设置样式，而javascript的样式名通常类似于对应的CSS属性。

javascript中属性为单个的单词如margin，则CSS中属性也为单个的单词；

CSS中的属性名为连字符连接的的单词时，如text-align，则javascript中的属性为textAlign。（注：连字符删除，且使用camelCase命名法）

2）根据类型设置元素样式

利用javascript来修改CSS样式，先通过getElementByTagName()获取元素并保存为变量，再通过修改变量的属性来设置样式。

利用class类名获取元素，使用className属性来应用类名。

var tagLineElement =document.getElementById("tagline");

tagLineElement.className +="errorClass";//引号内的是已有的类名。

注：“+=”表示该操作符导致该类被添加到一个已有的该元素已经从属的类而不是覆盖那些已被应用类的类。

3）使用javascript获取元素样式

应用与给定元素的已有样式也可以使用javascript获取。获取的方式依赖于浏览器。支持W3C兼容的浏览器，使用getComputedStyle()方法获取样式。

对于IE浏览器需要使用currentStyle数组属性。所获取的样式是最终应用的样式。

4）使用javascript修改样式表

如何通过style对象操作单个的样式元素。

通过检查document.styleSheets属性来确定访问者浏览器是否支持已有样式的获取。

要克服IE浏览器和W3C兼容浏览器之间的差别。IE浏览器使用rules数组获取给定样式表所应用的规则，而W3C兼容的浏览器使用cssRules数组获取该规则。

0 0