JavaScript学习笔记之CSS

HTML负责结构层，网页的结构层由HTML或者XHTML之类的标记语言负责构建

CSS负责表示层，描述页面内容应该如何呈现。

JavaScript负责行为层，负责内容应该如何响应事件这一问题。

 

能利用css解决的问题不要用js去实现，能用css实现的内容不要在html中使用，每个都应该严格负责自己的领域。

文档里的每个元素都是对象（一切皆对象）

 

文档的每个元素节点都有一个属性style，style包含着元素的样式，查询这个属性将返回一个对象而不是一个简单的字符串，样式都放在这个style对象的属性里

因为每个属性都会包含多个样式，所以要返回一个对象才比较好对属性进行操作！

 

格式：element(元素).style.property(属性样式)

 

如果要得到一个标签的样式：

1. 从文档里把这个元素找出来
2. 利用element.style.property获取样式（css样式名之间的-要用驼峰命名法来表示，否则js无法解析。例如：font-family-->fontFamily）

style属性的一个很大的局限性：style只能返回内嵌样式，即只有把css style 添加到标记里，才能用DOM style属性去查询那些信息

　　　　　　　　　　　　　　　　　　　来自外部的.css文件已经不能再用DOM style检索出来了。

ps：颜色：在css用颜色的英文名来命名颜色，如red，在js中会显示red，如果用#000000类似的用法，js会显示为RGB的格式

 

 

 

为内嵌样式设置属性：

style属性的各个样式，不仅可读，还可写。可以通过style属性去更新样式；

格式： element(元素).style.property(要改变的属性样式) = " value "（引号必加）；

注意：只有在css不方便的场合，才可以使用DOM对文档的样式做一些的小的增强，但是css始终是主体；

js特别擅长处理重复性任务，用一个while或者for循环就可以轻松地遍历一个很长的列表

 

 

在.CSS文件中改变样式：（确保网页的表示层和行为层分离的彻底）

与其使用DOM直接改变某个元素的样式，不如通过JavaScript代码去更新这个元素的class属性

技巧：在css样式表里写多一个class属性的样式表，利用setAttribute方法来把标签中class属性的值改变，从而得到新的样式。

className属性：有一个更简单的办法更新class的是使用className属性（是一个可读，可写的属性），只要是元素节点都有这个属性

获取元素的class值，格式： element（元素）.className

用className属性和赋值操作符可以设置一个元素的class属性值

格式： element（元素）.className = "classname"

使用这个操作可以把新的class值把原先的class的值替换掉。

但有一个问题是，我们有时并不是想要替换掉这个class值，我们只是想在原来的class的值后面再追加一个class的值。

可以使用字符串拼接的方法： element（元素）.className += " classname"   注意：在classname前面需要有一个空格

 

推荐步骤：

1. 检查className属性的值是否为空
2. 如果是，则直接把class的设置值直接赋给className
3. 如果不是，则把一个空格和新的class设置值追加到className上面去

 

对函数进行抽象可以使函数的使用范围更广，通过赋予参数调用的方式；当发现可以对一个函数进行抽象时，应该立刻就去做！！！！！！